title: Passing props to an axios delete request
body: <p>The objective is to, by pressing a button, delete the object from the database.</p>
  <p>To do that, I have to pass the ID of the object I want to delete from the database to the axios query. But I'm stuck trying to do it.</p>
  <p>In my opinion the problem is I am not passing the ID to erase to the query, since the query seems right to me.</p>
  <p>File: persons.js</p>
  <pre><code>import axios from 'axios'
  const baseUrl = 'http://localhost:3001/persons'
  
  
  const deleteContact = (id) =&gt;{
    const request = axios.delete('{$baseUrl}/${id}')
    request.then(response =&gt;response.data)
    }
  
  export default { 
  
    deleteContact: deleteContact,
   
  }
  </code></pre>
  <p>The button that should call the function to delete:
  File: person.js</p>
  <pre><code>import React from 'react'
  
  const Person = ({ person, deleteContact }) =&gt; {
     
     
      return (
        &lt;li&gt; 
          {person.name} {person.number}  
          &lt;button onClick={deleteContact(person.id)}&gt;Delete {person.id} &lt;/button&gt; 
        &lt;/li&gt;
      )
    }
  
    export default Person
  </code></pre>
  <p>So, by pressing the button I execute the deleteContact funtion and I pass to that function the person.id so it sends the id to delete.</p>
  <p>Here is waht's wrong.  I don't know how to make the function deleteContact.</p>
  <p>I have tried this, but of course I am not sending any props. It's wrong and does nothing. I get the error TypeError: deleteContact is not a function.</p>
  <pre><code> const deleteContact = (id) =&gt; {
   
  }
  </code></pre>
  <p>The deleteContact funtion I try to implement is on the file App.js</p>
  <p>It is something obvious I am missing here. But I can't figure out what is.
  Likely something basic, but I have been stuck here for a while, as silly this may seem to be.</p>
  <p>File: App.js</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import Person from './components/Person'
  import Form from './components/Form'
  import Filter from './components/Filter'
  
  import FilterResults from './components/FilterResults'
  import contactService from './services/persons'
  
  //npm run server
  
  const App = () =&gt; {
  
  
  
  
    //Reminder: current state, function that updates it, initial state.
  
    const [ newName, setNewName ] = useState('')
    const [ newNumber, setNewNumber ] = useState('')
    const [contacts, setContacts] = useState([])
    //Filter
    const [ filter, setFilter ] = useState('')
    
    
    //contactService is importer from /services/persons.
    //.getAll is like typing: axios.get('http://localhost:3001/persons')
  
    //Effect hooks used to fetch data from the server. The data fetched is saved
    //into the contacts state variable
    useEffect(() =&gt; {
      
      contactService
      .getAll()
      .then(response =&gt; {
        setContacts(response.data)
      console.log(contacts)
        
      
    })
    
    }, [])
  /* 
    second parameter of useEffect is used to specify how often the effect
     is run. If the second parameter is an empty array [], 
     then the effect is only run along with the first render of 
     the component. */
  
    console.log('render', contacts.length, 'contacts')
  
  
    //adding new persons
    const addPerson = (event) =&gt; {
      event.preventDefault()
      /* complete the addPerson function for creating new persons */
      const personObject = {
        name: newName,
        number: newNumber,
        //The server will create the id 
        //id: persons.length + 1,
      }
  
      //Adding the data to the server
      /* 
      using separate server comunication module from persons.js
       &quot;create&quot; instead of previous code:
      axios
      .post('http://localhost:3001/persons', personObject) 
      
      replaced by:
      
      contactService
      .create(personObject)
      */
  
      contactService
      //Passing personObject to create
      .create(personObject)
      .then(response =&gt; {
        console.log(response)
           //After concat, the fiel is set to blank again ('').
  //Updating state after creating, to display created contact.
      setContacts(contacts.concat(personObject))
      setNewName('')
      setNewNumber('')
      })
  
    
    }
   //Delete contacts
   const deleteContact = (personObject) =&gt; {
   
  }
  
  
    const handlePersonChange = (event) =&gt; {
      console.log(event.target.value)
      setNewName(event.target.value)
    }
    const handleNumberChange = (event) =&gt; {
      console.log(event.target.value)
      setNewNumber(event.target.value)
    }
  
    const handleFilterChange = (event) =&gt; {
      setFilter(event.target.value)
    }
   
   
    const personsToShow = filter === ''
      ? contacts
      : contacts.filter(person =&gt;
          person.name.toLowerCase().includes(filter.toLowerCase()))
    const row_names = () =&gt; personsToShow.map(person =&gt; 
      &lt;p key={person.name}&gt;{person.name} {person.number} &lt;/p&gt;
    )
  
   
  
    return (
      &lt;div&gt;
   &lt;Filter value={filter} onChange={handleFilterChange} /&gt;
  
        &lt;Form
        onSubmit={addPerson}
        name={{value: newName, onChange: handlePersonChange}}
        number={{value: newNumber, onChange: handleNumberChange}}
        deleteContacts={() =&gt; deleteContact()}
  
        /&gt;
   &lt;h2&gt;Numbers from database&lt;/h2&gt;
       
     {/*   The contents of the database are stored on the variable contacts.
       I map through the array. Person.js component used.  */}
        &lt;ul&gt;
        {contacts.map(person =&gt; 
        //Pass all the props from person to Person.js
            &lt;Person 
            key={person.id} 
            person={person} 
            
           
            
            /&gt;
           
          )}
        &lt;/ul&gt;
        &lt;h2&gt;Filter results&lt;/h2&gt;
        &lt;FilterResults persons={row_names()} /&gt;
  
      &lt;/div&gt;
    )
  }
  
  export default App
  </code></pre>
  <p>The dabatbase is  hardcoded json.</p>
  <p>file db.json</p>
  <pre><code>&quot;persons&quot;: [
  
      {
        &quot;name&quot;: &quot;ss&quot;,
        &quot;number&quot;: &quot;ssssd&quot;,
        &quot;id&quot;: 17
      },
      {
        &quot;name&quot;: &quot;ddd&quot;,
        &quot;number&quot;: &quot;6tyhhth&quot;,
        &quot;id&quot;: 18
      },
      {
        &quot;name&quot;: &quot;almejas&quot;,
        &quot;number&quot;: &quot;1234&quot;,
        &quot;id&quot;: 19
      },
      {
        &quot;name&quot;: &quot;pailo&quot;,
        &quot;number&quot;: &quot;244&quot;,
        &quot;id&quot;: 20
      }
    ]
  }
  </code></pre>