Axios - Post

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<div id="root"></div>

Babel + JSX

class PersonInput extends React.Component{
	state = {
  	name: '',
  };
  
  handleChange = event =>{
  	this.setSate({name: event.target.value})
  }
  
  handleSubmit = event =>{
  	event.preventDefault();    /*stop the browser reload the page*/
    const user = {
    	name: this.state.name
    }
    
    axios
    	.post('https://jsonplaceholder.typicode.com/users',{ user })
    	.then(res => {
      	console.log(res);
        console.log(res.data);
      })
  }
  
  render(){
  	return (
    	<form onSubmit={this.handleSubmit}>
    	  <label>
    	    Person Name:
          <input type='text' name='name' onChange={this.handleChange}/>
    	  </label>
        <button type='submit'>Add</button>
    	</form>
    )
  }

}

class App extends React.Component{
	render(){
  	return(
    	<div className = 'App'>
    	  <PersonInput />
    	</div>
    )
  }
}


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