Krizzu Krizzu - 2 months ago 13
React JSX Question

How access those values in React?

I've got this Container Component (parent) and child component. I'm building my app with Container Component pattern (I try :) ).

So, parent takes all state handling, while child only accepts props and based on them displays output.

But, I came to this small issue: Child displays 2 buttons (+ and -) and two radio buttons (call them 1 and 2). Based on which radio is checked, I need to update state at parent.

I thought about doing it through ref, but I'll stay with good practices and avoid using it.

Other idea I thought about was to pass the function that is being called on button press (binded to parent), but I see no way of calling this function with argument passed in child component.

Child:

<label><input type='radio' name='time'/> Work time</label>
<label><input type='radio' name='time' /> Break time</label>
<button onClick={this.props.valueControl} className='add'>+</button>
<button onClick={this.props.valueControl} className='sub'>-</button>


Thanks for any help!

Answer

The way you would communicate with the parent from your child component is via callbacks passed in using properties:

in Parent.js:

...
  someEventOccured(event) {
    this.modifyState();
  }

  render() {
     ...
     <child-component onSomeEvent={this.someEventOccured.bind(this)}>
     ...
  }
}

in Child.js:

...
  render() {
    ...
    <button onClick={this.props.onSomeEvent}></button>
    ...
  }
}

In real life, you would probably attach a method of Child to the onClick that processes the event and sends only the data back to the Parent instead of the whole event.