Can you please add the solution to this lesson?

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.

Challenge: Create a Controlled Input

Link to the challenge:

you can access all the challenges at any time from freecodecamp.org/learn
if one challenge is giving you issues you can always go to next one

1 Like

The problem is not that there is no solution. The problem is the challenge (and Hint) apparently did not teach you how to do the required steps.

What in particular did you have trouble with and what do you think needs clarification?

1 Like

Well there are only 3 checkmarks at the bottom. Maybe 2 more are needed for the other parts.

The part that I failed was this one:

handleChange(event) {
this.setState({
input: event.target.value
});

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)

handleChange(event) {
this.setState({input: event.target.value});
}

And the one that took hours to notices was the mistake of using “event.target.input” instead of “event.target.value.”

handleChange(event) {
this.setState({input: event.target.value});
}

Probably not that important but the “handleChange(event)…” part seemed to accept anything I type no matter what I wrote in it.

Thank you. Totally forgot that we can jump to whatever lesson we want.

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.

If you are unsure of how to use setState go back and redo one of the previous challenges - React: Set State with this.setState

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.