Tell us what’s happening:
I was stuck for days on the lesson " React: Create a Controlled Input" until I read lots of forums and other websites with examples…
This almost made me quit learning React (because I could not progress at all to the next lesson)
Can you please also add the solution so that others can skip this frustrating lesson?
Thank you!
Claudiu
Your code so far
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ''
};
// change code below this line
this.handleChange = this.handleChange.bind(this);
this.onChange = this.onChange.bind(this);
// change code above this line
}
// change code below this line
handleChange(event) {
this.setState({input: event.target.value});
}
onChange() {
handleChange(this.setState);
}
// change code above this line
render() {
return (
<div>
{ /* change code below this line */}
<input type="text" value={this.state.input} onChange={this.handleChange} />
{ /* change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0.
First I wasn’t sure if here I had to use “input={this.state.input}”. Was copying some example from a suggested website and I used only: “this.setState({event.target.value});”
Then I was missing the “input” word. (this one took me a while to notice and read the tips, forum and advices x5 times over and over again)
I don’t think any of those mistakes are the fault of the challenge. I’m not saying “omg it’s so obvious, totally your fault”, I’m just saying everything you mention was explained in the challenge, or before in a previous challenge.
It tells you in the challenge text what the correct property name is.
You can access this string with event.target.value inside the method. Update the input property of the component’s state with this new string.
Struggling with code teaches you way more, and I mean way more, then copy-pasting code ever will.
Hopefully, the experience has made it so you are more likely to remember how to use setState or what the correct property on an input element is. Not saying it’s always fun to struggle, but it pays off in spades.
Edit: You can also open a GitHub issue and ask if anyone wants to add a solution to the Hints page.