How to send data from a Child component to Parent component in React

Photo by Matt Hardy on Unsplash

It has been a while since I have written an article and have missed it to be honest. This article will be about how to pass data from child components back to parent components.

So first things first, we will need to create a React project, navigate to a suitable place on your desktop and create folder named “reactchildtoparent”.

Now open your favourite code editor and using its terminal navigate to the folder you just made previously. When inside of this folder enter the below command.

npx create-react-app reactchildtoparent

After a few minutes your react project should be created, now go ahead and open this in your code editor. Personally I use Visual Studio Code.

Inside the “src” folder create another folder called “components” and inside of this folder create two “.js” files one named “Parent.js” and he other “Child.js”.

For this article I will use the “App.js” file as the initial component that I will see.

Since React only follows the one-way data binding pattern there is no official way of sending data from a child component up to a parent component but you can always send variables and functions from parent to child however there is a workaround for the reverse (from…