Submitted work but Am receiving the following error please help. My input renders when I type

General
1

Typing in the input element should update the state and the value of the input, and the p element should render this state as you type.

2

We would need to see your code in order to have any chance of helping you fix it.

3

Here’s my code:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }

  render() {
    return (
      <div>
        <h4>Controlled Input:</h4>
        < p> <input type="text" value={this.state.value}  {this.handleChange} /></p></div>

    );
  }
};
4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

  1. You have an input property on the state object but you are setting a value property inside the setState call inside your handleChange method.

  2. You didn’t add the input element where the challenge told you to add it.

  3. The input elements value attribute is set to the wrong state property (should be input not value).

  4. The input element is missing the onChange attribute which is what should be assigned the handleChange method.

  5. You changed the p element it needs to remain like it was in the starter code.