Scribd
Upload
20 views1 page

Create A Controlled Input

The document contains a React component called ControlledInput that manages an input field's state. It initializes the state with an empty string and updates it through the handleChange method when the input value changes. The rendered output displays the input field and the current value of the input below it.

Uploaded by

Rafael Teresópolis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
20 views1 page

Create A Controlled Input

The document contains a React component called ControlledInput that manages an input field's state. It initializes the state with an empty string and updates it through the handleChange method when the input value changes. The rendered output displays the input field and the current value of the input below it.

Uploaded by

Rafael Teresópolis
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

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} onChange={this.handleChange} ></input>
{ /* Change code above this line */}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};

You might also like