‫Let me now show you a quick example
‫of child to parent communication
‫which is a very important thing in React development,
‫and it works, basically,
‫exactly the same in class-based React.
‫So what I want to do now,
‫is to quickly extract this input right here
‫into its own component.
‫So let's actually grab all of this here.
‫And then, let's create a new class here.
‫So a new component, just called input,
‫which extends React.Component.
‫And then, the render method
‫from which we simply return what we just cut there.
‫And then, let's come back here
‫and simply include that input.
‫All right .
‫But of course, then we get some errors
‫because this input here depends
‫on some state and on updating state
‫which is not living anymore in this current component.
‫So the location state, of course,
‫needs to stay in the app component
‫because we need it here in this other method.
‫So here in this fetchWeather event handler.
‫So we need to do what we always do,
‫which is to pass in these things as props.
‫So this data of location.
‫And so let's add this.state.location.
‫And then here, we receive that as props.
‫So now it's no longer this.state.location
‫but this.props.location.
‫And so if I give it a safe now,
‫then we are back to working here.
‫However, this state will of course still not update
‫because the state, again,
‫still lives in that other component.
‫So in the app component.
‫And so this is where child to parent communication
‫comes into play again.
‫So remember that that basically means
‫that a child component needs to update the state
‫in a parent component.
‫And the way we do that,
‫is to simply pass down the state updating function
‫into the child component.
‫So basically, we need now this and pass it as a prop.
‫So let's grab that, and actually let's create
‫a brand new event handler function here,
‫and we will do it just like this other one.
‫So just like we did in the previous lecture
‫as a class field.
‫So let's call this one setlocation,
‫and then this one needs to receive the event.
‫And actually it's just copy paste at this point.
‫So let's remove that.
‫And so with this, we created ourselves the event handler.
‫And so now all we have to do, is to pass that in also here.
‫So let's call that prop maybe onChangeLocation,
‫and then the set location function.
‫So actually this.setLocation.
‫So we have so many "this" here,
‫it's getting a bit confusing indeed.
‫So on unchanged location, let's just copy that.
‫And so now, again, this.props.onChangeLocation.
‫And so, now we are back
‫to being able to change the input here.
‫But now we are doing it using child to parent communication.
‫So this technique is just as important
‫in class-based React as in function component-based React.
‫So the whole thinking in React part
‫is actually exactly the same in class
‫and in function components.