Create a Controlled Input 5

Back End Help
#1

Tell us what’s happening:
Having major trouble figuring this one out. I’ve tried looking at the hits, yet it says I have the wrong coding in it, and I have no clue what I did wrong. Anyone know how to correctly fix it?

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; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.80 Safari/537.36 Avast/75.0.1447.81.

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

#2

You need to properly indent your code and you will see that you put the handleChange method inside the constructor instead of it being separate.

Also, you are adding code outside of the commented sections. When it states the following, you should not be adding coding outside of those sections.

change code below this line

change code above this line

My recommendation is the click the Rest All Code and start over. You can copy the code you think is correct somewhere else temporarily and try to paste it back into the correct locations.

#3

I reset my code, but still have gotten it wrong. I have changed the code multiple times, only to get it incorrect. Here’s my newest code:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    handleChange() {
      this.setState({
        input: event.target.value
      });
    }
    // change code above this line
  }
  // change code below this line
}
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input value = {this.state.input}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

What am I doing wrong here?

#4

The first curly bracket here should be deleted:

}
  // change code above this line
  render() {
#5

Okay. I deleted it, but I still have an error. New code is this:

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

  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input value = {this.state.input}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Now what else am I doing wrong? This is so confusing.

#6

You’ve put handleChange inside the constructor.

class MyClass {
  constructor () {
    // values you want to initialise when
    // the class is instantiated go here
  }

  method () {
    // this is a function added to the prototype
    // of the class, so it can be used by any
    // member of that class. Like `render()` or
    // `handleChange()`
  }
}
#7

I don’t quite understand what you mean. I’m steadily trying to complete it, but I keep getting errors.

#8

You have a function called handleChange which is inside the function called constructor.

It should be alongside the function called constructor, not inside it.

The class should contain three functions alongside each other: constructor, handleChange and render.

#9

Okay, I’m trying the best I can to figure out what I’m doing wrong, yet I keep getting the incorrect coding. Here’s my latest code I just did:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    onChange() {
      this.setState({
        input: event.target.value
      });
    // change code above this line
  }
  // change code below this line
   handleChange() {
      this.setState({
        input: event.target.value
      });
    }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input value = {this.state.input}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

What should be different here?

#10

You’ve moved the method outside the constructor but you’ve replaced it with another identical one.

It is asking you to bind the method in the constructor, which ensures that it always gets called with the correct value for this

this.handleChange = this.handleChange.bind(this);

Which says “assign to the property handleChange a version of the handleChange function that will always get called with the correct value for this”

#11

I tried putting that in, and I still got an incorrect code error. Here’s my newest code update:

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

What am I doing wrong now? I’m so confused.

#12

In your latest attempt you are still not fulling the following requirements in the challenge instructions. I have bolded the parts you still have not implemented.

First, create a method called handleChange() that has a parameter called event .

In the render method, create the input element above the h4 tag. Add a value attribute which is equal to the input property of the component’s state . Then add an onChange() event handler set to the handleChange() method.

#13

I’m trying to get a better understanding of this, but I keep getting it wrong. Here’s my newest code as of now:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    handleChange() {
      this.setState({
        input: event.target.value
      });
    }
    // change code above this line
  }
  // change code below this line
    onChange() {
      this.setState({
        input: event.target.value
      });
    }
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input value = {this.state.input}/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Now what am I doing wrong? My brain is getting fried from trying to learn this. I’ve been working on this one since yesterday or the day before, and I, for the sake of my life, cannot figure it out.

#14

I can not see that you changed anything since the last time you posted your code.

My last reply bolded the requirements you have still not met. Do you understand what the first one I bolded expects from you?

#15

To be honest with you, no, I do not understand at all. I’m completely and utterly confused.

#16

The method does not go in the constructor. A constructor function creates an object with some properties -

class Example {
  constructor() {
    this.property1 = 1;
    this.property2 = 2;
  }
}

new Example()
// creates an object like so:
// { property1: 1, property2: 2 }

The methods on the other hand are functions you define outside the constructor, and they get attached to the prototype, so they are available to every instance of that class.

This is asking you to do three things:

  • add the method, which is a function that takes one argument (the event). Your function does not have this parameter, and is in the wrong place.
  • bind the method in the constructor - this assigns it to a property. This is as I described, exactly. It is not asking you to define a function in the constructor, it is asking you to bind the method called handleChange.
  • add an onChange handler. This is a JS event handler, and you use it in JSX like <input onChange={/* the function you want to execute when the input changes*/} />
#17

Okay, I moved the code for handleChange, so I still am lost. I’m sorry, my learning disabilities are kicking in so badly, that it’s hard for me to understand things like this.

#18

Second thing:

Third thing:

#19

Okay, here is my updated code that tells me I did it wrong yet again:

class ControlledInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ''
    };
    // change code below this line
    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 onChange = {this.handleChange.bind(this)
        }/>
        { /* change code above this line */}
        <h4>Controlled Input:</h4>
        <p>{this.state.input}</p>
      </div>
    );
  }
};

Now what in the world am I doing wrong? I’m so confused, my learning disability is taking over, and it’s hard for me to understand things easily tonight.

#20

Hi ! I have corrected your code and pasting below. I have tested and it is working one. You need to change code 2 places.

You can compare with my code, I am sure you yourself will spot it. Still any query, please revert:

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 (


{ /* change code below this line /}

{ / change code above this line */}

Controlled Input:


{this.state.input}



);
}
};