Reactjs : How to change props data from parent component that already distribute to child component?

Question

I just creating a project and use a several component for a page and pass data by using props to each components. The problem is, when I have already change data from parent component to child component by using props and I have update the data from parent component, the child component still using the old data. The example is just like this:

 class Child extends Component{ constructor(props){ super(props); this.state = { variabel : props.variable } } render() { return ( <div> <h1>{this.state.variable}</h1> </div> ) } } class Parent extends Component{ constructor(props){ super(props); this.state = { variabel : 'Hello' } } render() { return ( <div> <Child variable={this.state.variable} /> </div> ) } } 

So, when I run the page and update the variabel state in Parent Component, Child Component still show the old value. How to make it updated as the Parent Component data? Or I must using Redux for this case?

Answer 1

In general you'll only want to keep one particular piece of state in one place. If you reassign it in the constructor of Child , it will not update when the parent's state updates. So something like this pattern should work:

class Child extends Component{
  // Note that no constructor is needed as you are not initializing any state or binding any methods.    
  render() {
    return (
      <div>
        <h1>{this.props.variable}</h1>
      </div>
    )
  }
}


class Parent extends Component{
  constructor(props){
    super(props);
    this.state = {
      variable : 'Hello'
    }
  }
  render() {
    return (
      <div>
        <Child variable={this.state.variable} />
      </div>
    )
  }
}

A warning note about not initializing state with props is in the React docs for constructor , as a matter of fact.

Answer 2

Mitch Lillie's answer is the correct one. You should have only one source of truth. In general, it's a good idea to keep the state in the nearest common ancestor of the components that depend on the state. Then you pass the props down.

If, however, you need to keep a copy of the prop in the child state, you should use the life cycles that React provides .

Codepen Live Demo

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      variable: props.variable,
    };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (this.props.variable !== prevState.variable) {
      this.setState({
        variable: this.props.variable,
      });
    }
  }

  render() {
    const varState = this.state.variable;
    const varProps = this.props.variable;

    return (
      <div>
        Child props: {varProps}
        <br />
        Child state: {varState}
      </div>
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);

    setInterval(this.updateTime, 1000); // refresh every second

    this.state = {
      variable: new Date().toLocaleString(),
    };
  }

  updateTime = () => {
    this.setState({
      variable: new Date().toLocaleString(),
    });
  }

  render() {
    const time = this.state.variable;

    return (
      <div>
        <div>
          Parent: {time}
        </div>
        <Child variable={time} />
      </div>
    );
  }
}

ReactDOM.render(
  <Parent />,
  document.getElementById('container')
);