Reactjs coding with parent and child component

When you say values, do you mean state, props, user input, something else?

If you mean state or props: React has a 1-way data flow, so the easiest way to accomplish this is to actually store the data at a higher level. Either store the data used by the child in the parent and pass it down to the children for consumption, or else use a store that both parent and children have access to. Either way, this will make it much easier for all components to access the data.

If you mean user input: one way you can accomplish this is to pass a callback from the parent component to the child as a prop, and then in the child call that callback when a user does something or changes some value. The callback function can make the data accessible to the parent on that user action, and then you can decide what to do with the data from there.

AksharaDL,

Child to Parent — Use a callback and states

Parent to Child — Use Prop

Also here is another article explaining it: https://medium.com/@ruthmpardee/passing-data-between-react-components-103ad82ebd17

here is the solution. in parrent component you have a state. and have a setData method to update state. pass setData to ChildOne use props. and data to ChilTwo and use it

class StoreBanner extends React.Component {
  constructor() {
    this.state = {
      data: 'whatever'
    }
  }

  setData = (data) => {
    this.setState({data})
  }

  render() {
    return (
      <div>
        <ChildOne setData={this.setData}/>
        <ChildTwo data={this.state.data}/>
      </div>
    )
  }
}

and in ChildOne you can update the parrent state

class ChildOne extends React.Component {
  setParentData = () => {
    this.props.setData('another')
  }
  ...
}

You can do it like this.

class ParentComp extends React.Component {
    constructor() {
        super();

        this.state = {
            theStateToPass: null
        }
        this.receiveDataFromChild = this.receiveDataFromChild.bind(this);
    }

    receiveDataFromChild(data) {
        this.setState({
            theStateToPass: data
        })
    }
    render() {
        return (
            <div>
                <FirstChild updateMe={this.receiveDataFromChild} />
                <SecondChild stateFromFirstChild={this.state.theStateToPass} />
            </div>
        )
    }
}

class FirstChild extends React.Component {
    constructor(props) {
        super(props);

        this.callParentMethod = this.callParentMethod.bind(this);
    }

    callParentMethod(e) {
        let someDataToSend = "ABC";
        this.props.updateMe(someDataToSend)
    }
    render() {
        return (
            <div onClick={this.callParentMethod}>

            </div>
        )
    }
}

class SecondChild extends React.Component {
    render() {
        return (
            <div>
                {this.props.stateFromFirstChild}
            </div>
        )
    }
}

however it becomes complex and might lead to one's pulling their hair out. so i would suggest using redux , it keeps the flow simple , you have a reducer , actions and a container. everything goes with a flow and keeps it clean but it does comes with an extra overhead of more code as you will be creating container reducer and actions.