Create a Controlled Input - works but fails tests

JavaScript
1

Tell us what’s happening:

So, my input works but fails the final test. Thought there might be an issue with using ES6, I’ve had other problems with using ES6 syntax. I’ll rewrite it to use older JS, but thought it might cause a lot of frustration for others as well.

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(e) {
    e.preventDefault();
    let input = e.target.value;
    input !== null && input !== undefined ? this.setState({input}) : window.alert('Error: No target value') ;
  }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <h4><input type="text" placeholder="input" onChange={e => this.handleChange(e)} /></h4>
        { /* 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/71.0.3578.98 Safari/537.36.

Link to the challenge:

2 
handleChange(e) {
    e.preventDefault();
    let input = e.target.value;
    input !== null && input !== undefined ? this.setState({input}) : window.alert('Error: No target value') ;
  }

I think this is the problem, it should be like below. state is stored as objects, this.setState({input}) while your input is a value, I don’t think this is valid anyway.

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

as well as you don’t have the value attribute for the input tag

value={this.state.input}

Also, e => this.handleChange(e), you don’t need to do this (using an arrow function in the render call is it will create a new function every time, which ends up causing unneeded re-renders, which is bad), just this.handleChange for this case is enough

1 Like