title: DELETE http://localhost:3000/people/[object%20Object] 404 (Not Found)
body: <p>So I have been trying to delete a person from my table with this function:</p>
  <pre><code>  const deletePerson = async (id) =&gt; {
      await fetch(`http://localhost:3000/people/${id}`, {
        method: &quot;DELETE&quot;,
        headers: {
          &quot;Content-type&quot;: &quot;application/json&quot;
        }
      })
  
      await setPeople(people.filter(person =&gt; person.id !== id))
    }
  </code></pre>
  <p>and this is the table:</p>
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
         &lt;tr&gt;
           &lt;th&gt;#&lt;/th&gt;
           &lt;th&gt;Name&lt;/th&gt;
           &lt;th&gt;Age&lt;/th&gt;
           &lt;th&gt;&lt;/th&gt;
         &lt;/tr&gt;
     &lt;/thead&gt;
      &lt;tbody&gt;
         {people.map((person) =&gt; (
            &lt;tr key={person.id + 1}&gt;
              &lt;td&gt;{person.id}&lt;/td&gt;
              &lt;td&gt;{person.name}&lt;/td&gt;
              &lt;td&gt;{person.age}&lt;/td&gt;
              &lt;td&gt;
                &lt;button onClick={deletePerson} id=&quot;remove-button&quot;&gt;REMOVE&lt;/button&gt;
              &lt;/td&gt;
           &lt;/tr&gt;
         ))}
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>This is the json file (I use mock db, JSON server):</p>
  <pre><code>{
    &quot;people&quot;: [
      {
        &quot;name&quot;: &quot;John Doe&quot;,
        &quot;age&quot;: &quot;69&quot;,
        &quot;id&quot;: 1
      },
      {
        &quot;name&quot;: &quot;Jane Doe&quot;,
        &quot;age&quot;: &quot;64&quot;,
        &quot;id&quot;: 2
      }
    ]
  }
  </code></pre>
  <p>When I click the remove button, the delete function doesn't recognize the id (I guess) and this error shows up. I've been trying to solve it on my own but I couldn't succeed. I'm new to ajax and http requests so I'm open to suggestions and information.</p>