score:12

Accepted answer

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>
    );
  }
}

score:0

You can pass a function down from the parent to both of the children, to allow setting of the value. You may want to pass the value as another property. The function in the parent should make a call to setState with this new value, which will cause re-rendering of itself and any children.

So in this way the value is updated and passed to the other child.

You can also do this if you are using redux, as it is designed to allow state management outside of a component.

score: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.

score:2

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.


Related Query

More Query from same tag