Passing State From Nested Component to Parents with Data Attribute and Pointer Event

React Component could be built and assembled like lego bricks. Passing data from parents to children components is pretty straight forward using Props and States. We can also pass a Function in Parent Component to Children components via Props as a Callback functions.

However, passing data from children components to parent components to not easy. We will need to assign the children value to one of the data-xx attributes like data-code and data-phone like in this example.

And then accessing these data in the callback function passing from Parent Component to Children Component via event.target.dataset

and a props function

To prevent passing the wrong dataset value from other nested divs into our props function, we also need to set all other nested divs pointer-event to none

References

Want to Receive Updates On Fastest AI Models, Successful AI Startups and New Hiring Candidates. Subscribe To My Newsletters
Subscribe