React - Passing data from child to parent

JavaScript
1

Title says it all, passing data from component A to component B would do in this case but I imagine that’s not possible and that it’s probably easier to just pass the data back to the parent.

So I have a parent class component and 2 child controlled components (A and B). I would like to use in child B the value of a property in child A.

class Parent extends component {
 state = {
  value: 1,
  finalValue: null
}

render() {
 <div className="container">
   <A value={this.state.value} />
   <B />
  </div>
}

Whatever I decide to do with the value property that I’m passing to component A, I want to get the final result of that value from component A to its parent, so I could perhaps use that final value in component B as well.

This example is probably not very practical, but hopefully you get the idea.

2

Theres a way to create reference. Last time I searched it, it was quite complicated…
but good thing is, either you can use Redux, or React just updated with Context API.
With context API, it works kind of like Redux, where state manangement becomes easier.


this guy has some info on how to use it. Hope this helped!
3

Well, if I understand everything correctly, this should be fairly easy to do without Redux or React’s context as they share a single closest parent. Just make a method passProp(target, payload) in <Parent /> and pass it to all children that will be capable to pass data between each other using it:

class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // define state for yourself and children
      myself: {
        // my own state
      },
      childA: {
        // state of child A
      },
      childB: {
        // state of child B
      },
    }
  }
  passProps(target, payload) {
    const newState = Object.assign(this.state, {});
    // or const newState = {...this.state}; if plugin-proposal-object-rest-spread is used
    newState[target] = payload;
    this.setState(newState);
  }
  render() {
    return (
      <div className="container">
        <A state={this.state.childA} handleState={this.passProps}  />
        <B state={this.state.childB} handleState={this.passProps}  />
     </div>
    );
  }
}

DISCLAIMER: I’m really beginner-level React user, so I’m NOT sure it will work, it’s just my first guess based on my current understanding of what React is.

4

Hey thanks for the reply, I managed to solve my problem but still it’s interesting to know whether or not it’s possible to pass data from child to parent because I might need to do that in the future. I’ll probably give your solution a try.

5

Sure! Let me know if worked :slight_smile:
Also I’ve just noticed couple typos in my code, so make sure you account for them:

  1. You need to bind this for passProps method in the constructor
  2. Target argument in Objest.assign() should go first, so Object.assign({}, state);
6

It doesn’t working because

this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.

…

To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument

So, we will receive outdated data in <Parent />

Link: reactjs :cherry_blossom: org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

7

@tongrow, I wrote disclaimer 4 months ago as I was pretty new to React, now I would say I understand it much clearly and I give you 100% that this will 100% work, just make sure you’re not using state as prop name, because it might confuse people (in the same way it confuses you).