React: how to pass props from child to parent to another child?

Question

I have a simple set up here:

I have a parent component which has 2 child components attached to this parent component. In the 1st child component: User changes the value of an input. The value of that change would then be a prop I'd like to pass from this child to the parent so that it can be passed to the other child attached to the same parent component.

Main (parent component)___|
                          |_Child 1
                          |_Child 2

this the set up currently, please view

The flow from user input to change in UI: 1. In "Child 1": adjust a slider, onChange pass value to parent component; 2. pass this prop (the new slider value) to the Parent component so that it can be available to the "Child 2" component; 3. That prop, the valueOfUserInput (the new slider value) would then be used in an if/else statement about styling the element of the "Child 2" component.

I've seen solutions and tutorials which are similar to my question, but they don't quite make sense to me. I've been hacking away at this all day, interspersed by meetings.

Any help or suggestions would be amazing. Thank you all for you patience with this React noob.

Answer 1

When you want 2 children to communicate or share some data, the way to do it in React is to lift state up (source).

This means that the state that the children use should live in the parent. Then the parent passes the state down to the children.

To update the state from an action in a child, the usual pattern is to pass down a function from the parent that gets called when the action is performed in the child.

Here's an example that should do what you want:

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { valueOfUserInput: '' };
  }

  handleUserInputChange = event => {
    this.setState({
      valueOfUserInput: event.target.value,
    });
  };

  render() {
    const { valueOfUserInput } = this.state;
    return (
      <div>
        <Child1 valueOfUserInput={valueOfUserInput} onUserInputChange={this.handleUserInputChange} />
        <Child2 valueOfUserInput={valueOfUserInput} />
      </div>
    );
  }
}

class Child1 extends React.Component {
  render() {
    const { valueOfUserInput, onUserInputChange } = this.props;
    return <input type="text" value={valueOfUserInput} onChange={onUserInputChange} />;
  }
}

class Child2 extends React.Component {
  render() {
    const { valueOfUserInput } = this.props;
    return (
      <div>
        {valueOfUserInput}
      </div>
    );
  }
}

Answer 2

Your diagram sort of makes sense, and I think I know the key piece that you're missing. The idea of Child 1 passing the prop up to the parent is partially correct... but how you pass that prop is that you must pass a function down to Child 1 from parent. So in parent, you'd have something like...

handleChange(val) {
  this.setState({ blah: val }) // you are going to pass blah down to Child 2
}

and then in your render function in Parent, you're passing this function down...

<Child 1 onChange={this.handleChange} />

Inside of `Child 1, you need to call that function.

<input onChange={this.props.onChange(val)} /> 

Child 1 now goes "hey, Parent, I've been changed, and I got some value here, you do the rest". Parent handles the event by setting its state, and then it can pass it down to whoever. Hopefully that makes sense, but this should be a helpful start.

Answer 3

I would personally use react-redux to do this communication. Redux, on a high level, is a global state manager. You can modify and access the reducer values from any of your components. Feel free to take a look at the boilerplate I made: https://github.com/rjzheng/REWBoilerplate/. If you look under '/app', you can see how everything is set up in the '/reducer' and '/store' folders. To learn how to use them, there's a pretty comprehensive documentation on it at http://redux.js.org/docs/basics/UsageWithReact.html.