Right AND Wrong?

Create a Controlled Input

The following code passes all the tests for this module. But the form I build does not actually work. As soon as I put a value in the input field, the screen goes blank.
Help. Please.

class ControlledInput extends React.Component {

  constructor(props) {


    this.state = {

      input: ''


    // change code below this line


    // change code above this line


  // change code below this line

  handleChange(event) {

    this.setState((state) => ({

              input: event.target.value



  // change code above this line

  render() {

    return (


        { /* change code below this line */}

      <input type="text" value={this.state.input} onChange={this.handleChange} />

        { /* change code above this line */}

        <h4>Controlled Input:</h4>






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.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.


Thank you for re-formatting my submission.

Remove the updater function and just return an object. You are not doing anything with the current state anyway, so you do not need the updater function.

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

If you did want to use event.target.value in the updater function I believe you would have to capture it in the handler and pass that to the updater.

handleChange(event) {
  const targetValue = event.target.value;
  this.setState((state, props) => {
    return { input: targetValue }

It has to do with how setState and events works.

Yep! To put it simply, event will not have target and value by the time setState will invoke the callback you’re passing.

Thank you lasjorg and snigo.