No component should have knowledge of the states of other components. This is because a state can either be local or can be passed through props (as a parameter). This is commonly referred to as a **"top-down"** or **"unidirectional"** data flow.

```js
<Title name={this.state.name} />
```

University of Michigan - Ann Arbor

State in React is similar to a private property that is managed by React. Every change in state calls the render method, displaying the new changes in the user interface. 

You can define a state in this way:

```ts
class Clock extends React.Component {
  constructor(props) {
    super(props); // calls parent contructor with props
    this.state = {date: new Date()}; // define state with initial value
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
```

State in React Js

https://reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle

After initialization, we cannot directly change the value of a state, as this will not trigger the re-render method.

```js
this.state.comment = 'Hello';   // <-- Wrong
```

To correctly change the state value, you need to call the `setState` function.

```js
this.setState({comment: 'Hello'});  // <-- Correct
```

Learn Before

Related