I want to update the value of 'change_color' in the second class and automatically render it in the first class when the value gets changed. Assume, 'Second' ponent as the child of the 'First' ponent.

Solved it. Code is edited and it is the answer.

class First extends Component {
  constructor() {
     super();
     this.state = {
       change_color: false
     }
     this.handleChange = this.handleChange.bind(this);
  }
  handleChange() {
    this.setState({
       change_color: true
    })
  }
  render() {
   console.log(this.state.change_color);
   return(<div><Second colorChange={this.handleChange} /></div>)
  }
}

class Second extends Component {
  constructor() {
     super();
  }
  render() {
    return(<div><button onClick={this.props.colorChange} /></div>)
  }
}

I want to update the value of 'change_color' in the second class and automatically render it in the first class when the value gets changed. Assume, 'Second' ponent as the child of the 'First' ponent.

Solved it. Code is edited and it is the answer.

class First extends Component {
  constructor() {
     super();
     this.state = {
       change_color: false
     }
     this.handleChange = this.handleChange.bind(this);
  }
  handleChange() {
    this.setState({
       change_color: true
    })
  }
  render() {
   console.log(this.state.change_color);
   return(<div><Second colorChange={this.handleChange} /></div>)
  }
}

class Second extends Component {
  constructor() {
     super();
  }
  render() {
    return(<div><button onClick={this.props.colorChange} /></div>)
  }
}

• javascript
• reactjs
• react-native
• ponents
• state

• Possible duplicate of ReactJS Two ponents municating – Chris Commented Sep 14, 2017 at 8:26
• is the first class a parent of the second class or vice versa or are they totally unrelated? That changes the answer – danday74 Commented Sep 14, 2017 at 9:01
• yeah assume the 'Second' ponent as the child of the 'First' ponent. – Subhojit Commented Sep 14, 2017 at 9:33
• Thanks a lot folks. I forgot something. It's solved. Taken a function in the parent ponent and changing the state variable value there and passed it to the child ponent and then calling it there to update the state variable value in the child ponent. Making necessary edits in the code for others help if they get the same situation like me. – Subhojit Commented Sep 14, 2017 at 10:00

2 Answers 2

Maybe you can try this, just make a container ponent, and set the value you want to change into a state of the container ponent, add a method to change the state value, then, you can use "this.props.handleColorChange" to call the method of the parent ponent in children ponents.

class ParentComponent extends Component {
  constructor() {
     super();
     this.state = {
       change_color: false
     }
  }
  handleColorChange= () => {
    const {change_color} = this.state;
    this.setState = {
       change_color: !change_color
     }
  }
  render() {
   const {change_color} = this.state,
    {handleColorChange} = this;
   return (
   <div>
    <ChildComponent1
      color={change_color} 
      handleColorChange={handleColorChange}
    />
    <ChildComponent2 
      color={change_color} 
      handleColorChange={handleColorChange}
    />
   </div>
   );
  }
}

class ChildComponent1 extends Component {
  constructor() {
     super();
  }
  render() {
   const {color} = this.props;
   return(
    <span>now, the color is {color}</span>
   )
  }
}

class ChildComponent2 extends Component {
  constructor() {
     super();
  }
  const {handleColorChange} = this.props;
   return(
    <button onClick={handleColorChange}>click to change color</button>
   )
}

What you need to do is lifting up the state. Create a new ponent that has a state with the colour and the change colour function. Then pass to first and second ponentes the corresponding properties as props and inside of them call the function to change the colour. Does it makes sense?