DEV Community

How to Pass Data From One Component to Other Component in React?

Deepak Kumar on December 17, 2019

Props are used for passing data between the components. We usually use it to pass data from the parent component to the child component. But wh...
Collapse
 
vvilliam5 profile image
Williams Oluwafemi

Precise write up, but for beginners i would recommend a learning curve though, start with passing props, then when you are comfortable with that you can move to using the Context Component, and when you feel boss in that too migrate to the big boys of Redux

Collapse
 
dipakkr profile image
Deepak Kumar

Thanks Williams ! I really appreciate it !

You are right as a beginner it's good to first learn the basics then migrate to advanced concepts like Redux or ContextAPI that's why I have not covered these topics in detail.

However, it always better to know what are the possible way to do this.

Collapse
 
alexanderop profile image
Alexander Opalic

Hey nice Post

Just a small feedback I think your post would much benefit on syntax highlighting on your code snippets

Collapse
 
dipakkr profile image
Deepak Kumar

Hi Alexander,

I didn't know about this feature.

Thank a lot for suggestion. I have done the required changes.

Collapse
 
anilsingh profile image
Anil Singh

Great one.

Collapse
 
dipakkr profile image
Deepak Kumar

Thanks Anil ! I am glad you liked it!

Collapse
 
davidyaonz profile image
David Yao

The business logics behind the data passing always confuses me no matter what technology I use
You made some great points! Nice job. Thanks

Collapse
 
dipakkr profile image
Deepak Kumar

Thanks David ! I really appreciate it !

Collapse
 
p4pranav profile image
Pranav Rai

I have one question, please advise me on that!

Suppose, ParentComponent.js has some content and ChildComponent.js has some content. And, when i am passing data from parent to child, i don't want to show the ChildComponent.js content inside the ParentComponent.js

Collapse
 
dipakkr profile image
Deepak Kumar

Let's understand the hierarchy if I understood your question.

Now, you are saying that I don't want to show content of child in parent. If the strucuture of Child -parent will be this, then the child content will be visible inside parent.

Collapse
 
beisixiong profile image
Bass

hi, a quick question. is it possible to pass states to a peer component (not child-parent related) without redux?