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) {
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((state) => ({
input: event.target.value
}));
};
// change code above this line
render() {
return (
<div>
{ /* change code below this line */}
<input type="text" value={this.state.input} onChange={this.handleChange} />
{ /* change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</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.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
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.