I don’t understand the instruction to “”“Also create a prop called handleChange and pass the input handler handleChange to it.”""
am i making a variable called handleChange in the MyApp? Naming everything the same is confusing.
Last Two Errors
How to check --> “”“The RenderInput component should receive the MyApp state property inputValue as props.”""
How to check --> “”“The GetInput component should receive the MyApp state property inputValue as props and contain an input element which modifies MyApp state.”""
Am i setting something? Am i doing something? I have no idea what goes where. This isn’t teaching me what to do and why
A function has been created for you, handleChange, which you pass to the child in a property with the same name handleChange
The idea behind this is that you can pass functions as well from parent to child, and have the child components interact via passing things in the parent
So in GetInput when the element changes, it calls handleChange() which changes the state of the parent component, which in turn changes what RenderInput displays
All of this is done simply by passing the function as a property which can be called upon change in a child.
I was just basing my comment on the code currently showing in your first post. If you have made significant changes from what shows up there, please post your latest attempt in a new reply, so we can take a look.
My last post of code showed exactly what I am seeing for the GetInput component inside your render, but I do not see where you are passing a prop named “handleChange”. I do see where you are passing a prop named “input” though.
Edit: @gebulmer and I are telling you the same thing.
Ok let’s back up. How am I sending a class method as a prop? You’re saying this.handleChange. Wouldn’t the value of the input tag be the value to the method?
can we break this down? I’m clearly missing something
render() {
return (
<div>
{ /* change code below this line */ }
<GetInput input={this.props.inputValue} /> <!-- this is the line -->
<RenderInput input={this.props.inputValue} />
{ /* change code above this line */ }
</div>
);
}
Honestly this is the hardest thing about React, and once this ‘clicks’ it’ll seem so obvious in hindsight
We have two components here doing different things, but they’re connected like parent and child. We can pass things from parent to child via properties.
We pass them in in a way that looks exactly like html attributes, just as you’ve done already with input
The receiver, the child component, can then use what it has been given by its parent, via it’s props object
Note though, it cannot use what it has not been given, which is precisely what @RandellDawson is getting at - you need to pass in the function via a property in order for the child to be able to use it
100% agree with @gebulmer on this. I struggled with understanding passing props for a while, but then the light bulb turned on and then I wondered how I ever was confused.