Controlled input challenge

JavaScript
1

Tell us what’s happening:

Hi everyone,
So I am trying to get the challenge done but it doesn’t work, even though I think my code should really work. I browsed through other similar forum topics, but I didn’t see anyone having the exact same issue.

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);
  // change code above this line
}
// change code below this line
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}
// change code above this line
render() {
  return (
    <div>
      { /* change code below this line */}    <input value={this.state.input} onChange={this.handleChange}> </input>

      { /* change code above this line */}
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};

This is the message I get:

ControlledInput should return a div element which contains an input and a p tag. The state of ControlledInput should initialize with an input property set to an empty string. 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. // tests completed

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-controlled-input

2

HINT: You’re missing something here - setState({

4 
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    this.handleChange = this.handleChange.bind(this);
    // change code above this line
  }
  // change code below this line
  handleChange(event) {
    this.setState ({
      input: event.target.value
    });
  }


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

        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};
5

I see, but it still doesn’t work…

6

The input element is usually self closing, like <input .... />. See if that works.

1 Like
7

oh, you’re right! thanks, it works now. I totally forgot about that