Remember Data Down Action Up in React

“Data down, Action up”

This phrase helps developers understand the flow of information from parent to child component and vice versa.

The first and more simple concept, “data down,” refers to the passing of data and/or functions via props from parent to child components. These props are passed down when a child component gets created. We pass data down to child components so they can render them on to the DOM.

Data is sent down to the child from the parent component with the help of props.

The second and trickier concept to understand, “action up,” refers to sending data back up to the parent from the child component with the help of some action or event. Often these actions are connected to a callback function.

Data is sent back up to the parent from the child component with the help of callback functions.