title: Delete data from API with Axios and ReactJS
body: <p>I am fetching data from the jsonplaceholder API into my state. How can I remove the data with the <code>deleteContact()</code> method? My greatest struggle is how to get the <code>deleteContact()</code> method right. </p>
  
  <p>Is this approach wrong? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class RemoveFromAPI extends Component {
  
      state = {
          users: []
  
      }
  
      componentDidMount() {
          axios.get(`https://jsonplaceholder.typicode.com/users`)
              .then(res =&gt; {
                  const users = res.data;
                  this.setState({ users });
              })
      }
  
      deleteContact () {
          axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`);
          .then(res =&gt; {
              const users = res.data;
              this.setState({ users });
          })
  
      }
  
      render() {
  
          const {users} = this.state
  
          return (
              &lt;div&gt;
                  &lt;ul&gt;
                      { this.state.users.map(user =&gt; &lt;li&gt;{user.name}&lt;/li&gt;)}
                  &lt;/ul&gt;
  
                  &lt;button
                      onClick={deleteContact}
                     &gt;
                      Remove
                  &lt;/button&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  RemoveFromAPI.propTypes = {};
  
  export default RemoveFromAPI;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>