# Props & State

`props` and `state` are **CORE concepts** of React. Actually, only changes in and/ or state trigger React to re- render your components and potentially update the DOM in the browser.

## Props

`props` allow you to pass data from parent(wrpapping) component to a child(embedded) component.

### AllPosts Component:

const posts = () => {
    return(
        <div>
            <Post title="My first Post" />
        </div>
    );
}

Here, `title` is the custom porperty(`prop`) set up on the custom `Post` component. We basically replicate the default HTML attribute behavior we already know.

### Post Component

const post = () => {
    return(
        <div>
            <h1>{props.title}</h1>
        </div>
    );
}

The `Post` component receives the `props` argument. You can of course name this arguement whatever you want - it's your function definiton. But React will pass one argument to your component function - an object, which contains all properties you set up on `<Post ... />`.

`{props.title}` then dynamically outputs the `title` property of the `props` object - which is available since we set the `title` property inside `AllPosts` component.

## State

Whilst props allow you to pass data down the component tree (and hence trigger an UI update), state is used to change the component, well, state from within. Changes to state also trigger an UI update.

### NewPost Component:

class NewPost extends Component {
    // state can only be accessed in class-based components!
    state = {
        counter: 1
    };
    
    render() {
        //needs to be implemented in class-based components!
        //Needs to return some JSX!
        return(
            <div>{this.state.counter}</div>
        );
    }
}

Here, the `NewPost` component contains the `state`. Only class-based components can define and use `state`. You can of course pass the `state` down to functional components, buit these then can't directly edit it.

`state` simply has a property of the component class, you have to call it `state` though - the name is not optional. You can then access it via `this.state` in your class JSX code (which you return in the required`render()` method).

Whenever `state` changes, the component will re-render and reflect the new state. The difference to `porps` is, that this happends with one and the same component - you don't receive new data(`props`) from outside!