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.
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.
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()`
}
}
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.
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.
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*/} />
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.
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.