Scribd
Upload
3 views1 page

Create a Controlled Form

This document contains a React component named MyForm that manages user input through a form. It includes methods to handle input changes and form submission, updating the component's state accordingly. Upon submission, the input value is displayed as a heading on the page.

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
3 views1 page

Create a Controlled Form

This document contains a React component named MyForm that manages user input through a form. It includes methods to handle input changes and form submission, updating the component's state accordingly. Upon submission, the input value is displayed as a heading on the page.

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
You are on page 1/ 1

class MyForm extends React.

Component {
constructor(props) {
super(props);
this.state = {
input: '',
submit: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
handleSubmit(event) {
// Change code below this line
event.preventDefault()
this.setState({
submit: this.state.input
})
// Change code above this line
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
{/* Change code below this line */}
<input value={this.state.input} onChange={this.handleChange}/>
{/* Change code above this line */}
<button type='submit'>Submit!</button>
</form>
{/* Change code below this line */}
<h1>
{this.state.submit}
</h1>
{/* Change code above this line */}
</div>
);
}
}

You might also like