Refreshing children state from parent React

Question

I have a table with some data and each element in the table is a React class component. It looks like this:

All i want is to have one checkbox for "check all" feature (top left checkbox). The thing is I don't know how to solve that because of props and state.

I have code like that in single element component:

getInitialState: function() {
    return { component: this.props.data };
  },

render: function() {
    var data = this.state.component;
    data = data.set('checked', this.props.data.get('checked'));
    ...
}

And I know I shouldn't get checked param from props but it is just temporary.

What I have problem with is: When I update checked param in parent it doesn't update state, because getInitialState isn't called after refresh (yep, i know it should be like that).

My question is: can I somehow update state of child component? Or it is better way to achieve that.

Answer 1

With functional components: An easy way to refresh the children internal state when props provided by parent change is through useEffect():

In the children:

const [data, setData] = useState(props.data);

useEffect( () => {
    setData(props.data);
}, [props.data]); 

In this way everytime the props.data change the useEffect will be triggered and force to set a new status for some data and therefore the component will "refresh".