Controlled Form

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

class Form 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){
    event.preventDefault();
  	this.setState({
    	input:'',
      submit: this.state.input
    })
  }
  
  render(){
  	return (
    	<div>
    	 <form onSubmit = {this.handleSubmit}>
    	   <input value = {this.state.input} 
                onChange = {this.handleChange} />
         <button>Submit</button>
    	 </form> 
              
       <h1>{this.state.submit}</h1>
    	</div>
    )
  }
} 

ReactDOM.render(
	<Form />,
  document.getElementById('root')
);