1

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' component as the child of the 'First' component.

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>)
  }
}
Subhojit
  • 1,389
  • 8
  • 19
  • 33
  • Possible duplicate of [ReactJS Two components communicating](https://stackoverflow.com/questions/21285923/reactjs-two-components-communicating) – Chris Sep 14 '17 at 08:26
  • is the first class a parent of the second class or vice versa or are they totally unrelated? That changes the answer – danday74 Sep 14 '17 at 09:01
  • yeah assume the 'Second' component as the child of the 'First' component. – Subhojit Sep 14 '17 at 09:33
  • Thanks a lot folks. I forgot something. It's solved. Taken a function in the parent component and changing the state variable value there and passed it to the child component and then calling it there to update the state variable value in the child component. Making necessary edits in the code for others help if they get the same situation like me. – Subhojit Sep 14 '17 at 10:00

2 Answers2

2

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

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>
   )
}
wzth
  • 56
  • 4
  • can you edit this thing a little assuming 'Second' component as the child of the 'First' component? – Subhojit Sep 14 '17 at 09:32
  • Thanks man. I forgot something. It's solved. Taken a function in the parent component and changing the state variable value there and passed it to the child component and then calling it there to update the state variable value in the child component. Making necessary edits in the code for others help if they get the same situation like me. – Subhojit Sep 14 '17 at 09:58
1

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

Santiago Benitez
  • 364
  • 2
  • 12
  • Thanks man. I forgot something. It's solved. Taken a function in the parent component and changing the state variable value there and passed it to the child component and then calling it there to update the state variable value in the child component. Making necessary edits in the code for others help if they get the same situation like me. – Subhojit Sep 14 '17 at 09:57
  • don't really understand what you mean. Do you want me to code an example for you? I thought with the explanation was enough to answer your question – Santiago Benitez Sep 14 '17 at 10:41
  • yeah indeed it was.. When did I say it's wrong..? you're very much right man :) – Subhojit Sep 15 '17 at 05:31
  • Oh just because I had answered the same as the other guys and earlier but you marked his answer as correct while mine is the same but just without the code sample. I thought it was going be clear with the explanation :( – Santiago Benitez Sep 15 '17 at 06:46
  • yeah.. it's good but he also wrote the whole code & made things easy to understand which ensured he gave much time on this question and as I can mark only one answer so I marked his.. there's nothing more than this bro. – Subhojit Sep 16 '17 at 07:24
  • it's fine... i didn't write you the code sample cause i was answering with my phone. It's ok np – Santiago Benitez Sep 16 '17 at 07:45