Simple Axios - delete

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 = {
  	id: 0,
  };
  
  handleChange = event =>{
  	this.setSate({id: event.target.value})
  }
  
  handleSubmit = event =>{
  	event.preventDefault();    /*stop the browser reload the page*/ 
    axios
    	.delete('https://jsonplaceholder.typicode.com/users/${this,state.id}')
    	.then(res => {
      	console.log(res);
        console.log(res.data);
      })
  }
  
  render(){
  	return (
    	<form onSubmit={this.handleSubmit}>
    	  <label>
    	    Delete Person By Id:
          <input type='number' name='id' onChange={this.handleChange}/>
    	  </label>
        <button type='submit'>Delete</button>
    	</form>
    )
  }

}

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


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