CODEWITHSUNDEEP
javascriptreactjs
Krzysztof Borowy
Krzysztof Borowy

Reputation: 548

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!

Upvotes: 0

Views: 50

Answers (1)

user2697852
user2697852

Reputation:

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.

Upvotes: 1

Related Questions