Controlled input for React problem

JavaScript
1

Please tell me on which line it’s wrong and what is wrong and tell me the answer to this question, so, that I can read and understand what’s going on.
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}/>
      { /* 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/90.0.4430.93 Safari/537.36 Edg/90.0.818.51.

Challenge: Create a Controlled Input

Link to the challenge:

2

As I said in the other thread:

      { /* Change code below this line */}
<input value = {this.state.input}/>
      { /* Change code above this line */}

You need an onChange attribute for this input element. You need to point it to your handleChange method.

3

I might suggest getting in the habit of referring to the docs, like here.

4

Could you tell me what to write and where to? i cannot understand as i have read your last response and other forums as well, if you could just give me the written solution, i will study it thoroughly and proceed further, i am just stuck on it for like two days. so if you can, just tell me what should be written.

5

Well, we don’t give people the answer, this is a learning site.

But you have a handler method called handleChange. You need to tell that input to run that method whenever there is a change. If you look into the link I provided, it gives this example:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

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

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

Notice the input:

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

That is how you use an onChange attribute. The method in the example even has the exact same name. That is why I provided that link.

Does that make it clear?

6

Get help button used to do it for me, apparently this time its not there, thats why i asked, there are a lot of things which cannot be understood by those who dont have any sort of knowledge in new fields (including me) in some areas, some times an example is enough, i will use the example given by you to try it.

7

Not sure why the challenge is showing the onChange property as a function/method call, that seems confusing/wrong.

From the challenge:

Then add an onChange() event handler set to the handleChange() method.

I think it should just be something like:

Set the onChange property on the input element to the handleChange() method.

Maybe with an example given:

<input onChange={this.someEventHandlerMethod} />
8

i figured it out from the example given above.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.