You can also pass data back and you still do this with props.
The idea just is that instead of having props that pass in data, like a string or an array or an object
to the lower level, to the child component as it's also called, you pass a callback function from the
parent component to the child component,
so no array or anything like that but a callback function.
So here in the app component, we could define a new function, add new goal handler, the name is totally
up to you and I name it handler because it also will kind of be triggered upon an event and here I expect
to get the new goal and then here, I can reach out to course goals
and for example push the new goal into this array and thereafter, console log course goals.
Now we have this function and now we can pass it to new goal via props. So there we could add a prop,
on add goal,
this is now not an event listener React defines, for all the built-in HTML elements, we have
built-in event listeners, like for example in the new goal component, on the form, we had on submit, on
a button we have on click, on input we also have on click for example because you can also handle click
events on inputs, you can handle those on any HTML element. Now in the end here I call this an event
handler but what it actually is is just a prop.
Technically there is no difference between class name where I pass in a string and on submit where I
pass in a pointer to a function.
So in the end, this is just a prop of the form element which React offers to you.
So here in app.js, we can also pass a prop here, on new goal, which holds a pointer to a function. I
just name this prop like this, not because I have to,
I could name it add goal or this here but it's a convention to name props which the end pass functions
to lower level components like event handlers because the functions you pass down to components in the
end will be called by these components upon certain events,
that is how it typically works and you will see that the more React applications you build.
So therefore, I follow this convention and name this on add goal and passed my add new goal handler
to the new goal component. So I pass a pointer, not the execution but just a pointer to its function, to
new goal on this on add goal prop. Now that means that inside of new goal, I can now accept props here,
I can accept this props parameter, I always get it even if I don't get any props but if I don't get any
props there isn't much sense in explicitly writing it out here but now I need a prop which I'm getting
on new goal and that is that on add goal prop I defined here. I want to call that function I receive on
that prop here inside of my add goal handler in new goal.
So instead of logging the new goal, I can now call props on add goal here, on add goal because that's the
name I chose here and on add goal passes a pointer at a function to the component. So inside of the new
goal component, I know I can execute on add goal because it holds a pointer to a function, so I now execute
that function it pointed to and I can pass my new goal as an argument to on add goal because indeed in
the function I passed to on add goal, I expect to get a new goal as an argument, as a parameter.
So now if we save everything, we should see that if I click add goal, we're outputting something from app.js
line 16, which is this log here and we're outputting our new course goals array, which are our
old goals and the new goal.
So parsing the goal from the lower level, from the child component, the new goal component to the parent
component, the app component in this case works and it works with props, we just use props to parse a
function that is then called by the child components instead of passing data directly from parent to
child,
this gives us a way to communicate back from the child to the parent with help of such a function.