ReactJS Basics - #12 Passing Data between Parent and Child Components

Parent-Child-Communication often times also requires the exchange of Data. Learn how to pass Data between Parent and Child Components.

It is Part of the ReactJS Basics Series.

[nassirtrabelsi]

Thank you so much really! I guees it's the most import video in the series :D keep it up!

[sush]

Great videos !!

Could you please add a tutorial explaining use of ReactJs in AngularJs for better performance
~thanks

[docpeterson]

Thank you! I just started React and this was really confusing me. Great explanation in all your videos.

[fernandoferreira]

Thank you very much! You did help me a

[lexsoft]

It has been 2 years now since you posted this video.
React 16.3 has introduced several useful features such Refs. I think you would kindly make a video on using Refs with React.createRef and React.forwardRef to access DOM nodes or React elements. For instance, accessing certain row in a table.
I have got the concept quite well, but want to know how other people use Refs in their apps that also apply the so called High-Order Components (HOC).
I am a beginner. So far, my main source of learning is React documentation.

[crazyprogrammer]

these videos are really helping me out

[kruthivillivalam]

Hi, Thanks for this awesome explanation. But when I do this, the header gets changed for a second and goes back to the old header again. I guess when the UI re renders, it takes the initial state value and not the new state. Could you please let me know how to handle this? That would be really great! Thanks in advance :)

[Dariusklokj]

Hi, i have a question: From a parent how do you manipulate the states of all components that were added to an array? example:

const square = <Child key={123} color={'#ff0000'}/>;
global.squares.push(square);


but this does not work for me.

[shemleong]

hi, thanks for the great tutorial. just a quick question, i tried binding changeLink using ES6 syntax like you suggested. eg. changeLink={() => this.onChangeLinkName() }. but that only makes 'Home' disappear when i click the button ): any idea why this is so? thanks!

[gdthegreat]

I couldn't find link to this code on github, as I also searched in branches! Could you please upload it?

[hadarshimshon]

Hi, Why In the Home component you define “homeLink” as a state ? The rendering will be in the App component.

[shaikatjibs]

Hello, I used ES6 syntax while passing the function to props to child component and it did not work. For example: I passed onChangeLinkName() to Home component and used the following syntax : changeLink={() => this.onChangeLinkName() } which did not work but when I used : changeLink = it worked. Is there any specific reason? Thanks again for the nice video.

[puneetkankar]

Nice explanation sir. Can you make video for crud operation using react, nodejs apis and any data base.

[johnfrades]

every video, before it starts, i always immediately press THUMBS-UP, it's a second nature

[saritajha]

I am getting an error - " TypeError: this.props.changeLink " is not a function. What should I do to make it work ?

[gwho]

How do you pass arguments into functions received from props, if you can't and shouldn't use ()?

[ast]

in every React video series there comes a point where the teacher gets really complex and stops explaining. this was that point for me.

[subashanaanurad]

could you please show us the Header.js file. my question is how can we change the link without calling the props from Header.js file. I have the problem of changing. I got undefined value for homeLink when it changed. I found from your GitHub repo. is this possible with only Stateless Components. BTW great tutorials series.

[BryanNystrom]

@Academind

As others have stated, passing the function to Home as works quite well.

Any explanation as to why "changeLink={ () => this.onChangeLinkName() }" does not work? It seems like this has to do with the fact that a parameter is needed for the function (newName) but nothing is getting passed back from the child component when the function is passed with the fat arrow method.

[premkumara]

This should work after change is made in Header.js

<li><a