Tracking changes on one property in state

Question

I have a state with different properties. I want to listen and fire an action when only one particular property in state changes. This property is array of objects and when it changes I want to send that new updated property to parent component. How would I do that?

Answer 1

You can use the bubbling approach.

Define the state and its values, as well as the event handler on the parent object. Pass the state and handler to the child component using properties. The JSX would look something like

class Parent extends React.Component {
  constructor() {
    super();
    this.state = { data: /* some data */ }
  }

  onChangeHandler = () => {
    // event handling 
  }

  render = () => ({
    <Child data={...data[i]} onChangeHandler={this.onChangeHandler} />
  });
}