Passing data in React between Parent and Child in Functional Components

For beginners who started out in ReactJS, passing data between components may be confusing. I struggle this when I first started out. There are two ways of passing data in React components

1. From Parent to Child
2. From Child to Parent

Passing Data from Parent To Child Components

When you are passing data from, you can use props to transfer the data. The Child will access the data in the props.

An example like this where you want to transfer a message from Parent to Child.

We have the Parent and Child components (Link to Github Repo)

Parent.js

Child.js

The Parent pass the data in message, and the Child got the data in props.message. Props pass the state from Parent to Child.

Passing Data from Child To Parent Components

Passing data from child to parent is more tricky. This is different compare to passing data from Parent to Child.

1. Create a callback method. This method will get the data from the Child to Parent.
2. Pass your data as props in Child. The Child will call the Parent callback using props.
3. The callback method in the Parent will act as prop to the Child component.

Here are the Child and Parent components (Link to Github Repo)

Parent.js

Child.js

Conclusion

We learn how to pass data between Parent and Child in functional component. Knowing this is essential to build an app in ReactJS. The Github repo is here.