Typing in the input element should update the state and the value of the input, and the p
element should render this state as you type.
We would need to see your code in order to have any chance of helping you fix it.
Here’s my code:
class ControlledInput extends React.Component {
constructor(props) {
super(props);
this.state = {
input: ""
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
render() {
return (
<div>
<h4>Controlled Input:</h4>
< p> <input type="text" value={this.state.value} {this.handleChange} /></p></div>
);
}
};
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.
You can also use the “preformatted text” tool in the editor (</>
) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).
-
You have an
input
property on the state object but you are setting avalue
property inside the setState call inside yourhandleChange
method. -
You didn’t add the input element where the challenge told you to add it.
-
The input elements
value
attribute is set to the wrong state property (should beinput
notvalue
). -
The input element is missing the
onChange
attribute which is what should be assigned thehandleChange
method. -
You changed the
p
element it needs to remain like it was in the starter code.