反应子组件不更新父状态，所以第二个孩子没有注意到变化

Question

Curently I have this structure.

Child1 <---- Parent ----> Child2

Parent component has this state

    this.state = {
            authenticationChecked: true,
            isAuthenticated: true,
            sideBarRetracted: false
        }

this.retract = this.retract.bind(this);
        this.unretract = this.unretract.bind(this);

and the following functions

retract() {
    this.setState({
        sideBarRetracted: true
    }, () => {
        console.log("retracted")
        console.log(this.state.sideBarRetracted) //I can see this changing to true, but the child wont take it into effect, even tho if i hardcode it , it will
    });
}

unretract() {
    this.setState({
        sideBarRetracted: false
    })
    console.log("unretracted")
}

Which is pased to both childs

<SideBar retract={this.retract} unretract={this.unretract} retracted={this.state.sideBarRetracted} {...this.props}/> 
<PrivateRoute authed={this.state.isAuthenticated} path="/skadi" render={(props) => <Skadi retracted={this.state.sideBarRetracted} {...props}/>} />

Now my question is. I supposedly should receive that as a prop in a child component, for example lets say in the sidebar component which is a child. Whose constructor is this, and im supposed to receive the prop there and assign it to the state

   constructor(props) {
    super(props);
    this.state = {
        retracted: this.props.retracted
    }

}

It works properly so far, but now I have the following issue. This same component has a function onClick() which will change that specific state

       <FontAwesomeIcon className="registerIcon" icon={faArrowAltCircleLeft} onClick={this.props.retract} />
<FontAwesomeIcon className="expandicon-retracted" icon={faArrowAltCircleRight} onClick={this.props.unretract} />

But point is, this is not working, the state is not being updated in the parent component. I can change it manually (hardcoding) and I see the child component reacting to the change, but i cant make it react with the onclick() update

At the same time, I have my Child2 component, who has been passed the parent state as well. Will its state update if I update the parent component using CHILD1 ?

I have seen that i should use something like this in the child2 , but well it wont work so far (mainly because parent component isnt updated afaik)

   constructor(props) {
    super(props)
    this.state = {
        sideretracted: false
    }
    console.log("props in skadi")

}

componentWillReceiveProps(nextProps) {
    this.setState({ sideretracted: nextProps.sideBarRetracted});
  }

Answer 1

You shouldn't set the child state from the props received from the parent component. Since you are updating the state of child component from the methods bound to the child components it isn't reflected in the parent component. One thing you could do is pass a method from the parent to update the state of the parent component and the child state gets updated by itself since it will be passed the new state variable from parent as a prop. You could have the toggleRetract method defined in the parent to set the parent state and pass it as a prop to the child component which would trigger it and set the parent state for you which will be passed down to the children components as props (like how you are passing the state props).

For example

function Toggle() {
  const [on, setOn] = React.useState(false)
  const toggle = () => setOn(o => !o)
  return <Switch on={on} onToggle={toggle} />
}
function Switch({on, onToggle}) {
  return (
    <div>
      <div>The button is {on ? 'on' : 'off'}</div>
      <button onClick={onToggle}>Toggle</button>
    </div>
  )
}

Here Toggle is the parent component and Switch is the child component and the parent component passes the on state as well as onToggle method which the child component uses to display and update the state respectively. More info here