Create a Controlled Input in React

JavaScript
1

Tell us what’s happening:
I don’t know how to finish this exercise.
Your code so far


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // Change code below this line
handleChange(event) {
  this.setState(
    input: event.target.value
)};
}
  // Change code above this line

// Change code below this line
<input value = {this.state.input} />
// Change code above this line
render() {
  return (
    <div>
      { /* Change code below this line */}

      { /* 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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

2

Hi @FEWD !

Welcome to the forum!

There are a few issues here. So I would just reset the lesson.

In the constructor you need to have the handleChange binding right after the state.
In here

  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // Change code below this line

    // Change code above this line
  }

Review this lesson on how to create the binding.

You were close here but there are some syntax errors concerning the parentheses and curly brace for setState.

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

Review this lesson for the proper syntax for setState

Lastly, you need to add the onchange function here

You will assign the handleChange binding you created earlier to the onchange
ex. onchange=handleChange binding

Hope that makes sense!

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.