Passing props to an axios delete request - reactjs

Question

The objective is to, by pressing a button, delete the object from the database.
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.
In my opinion the problem is I am not passing the ID to erase to the query, since the query seems right to me.
File: persons.js
import axios from 'axios'
const baseUrl = 'http://localhost:3001/persons'
const deleteContact = (id) =>{
const request = axios.delete('{$baseUrl}/${id}')
request.then(response =>response.data)
}
export default {
deleteContact: deleteContact,
}
The button that should call the function to delete:
File: person.js
import React from 'react'
const Person = ({ person, deleteContact }) => {
return (
<li>
{person.name} {person.number}
<button onClick={deleteContact(person.id)}>Delete {person.id} </button>
</li>
)
}
export default Person
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.
Here is waht's wrong. I don't know how to make the function deleteContact.
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.
const deleteContact = (id) => {
}
The deleteContact funtion I try to implement is on the file App.js
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.
File: App.js
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 = () => {
//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(() => {
contactService
.getAll()
.then(response => {
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) => {
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
"create" 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 => {
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) => {
}
const handlePersonChange = (event) => {
console.log(event.target.value)
setNewName(event.target.value)
}
const handleNumberChange = (event) => {
console.log(event.target.value)
setNewNumber(event.target.value)
}
const handleFilterChange = (event) => {
setFilter(event.target.value)
}
const personsToShow = filter === ''
? contacts
: contacts.filter(person =>
person.name.toLowerCase().includes(filter.toLowerCase()))
const row_names = () => personsToShow.map(person =>
<p key={person.name}>{person.name} {person.number} </p>
)
return (
<div>
<Filter value={filter} onChange={handleFilterChange} />
<Form
onSubmit={addPerson}
name={{value: newName, onChange: handlePersonChange}}
number={{value: newNumber, onChange: handleNumberChange}}
deleteContacts={() => deleteContact()}
/>
<h2>Numbers from database</h2>
{/* The contents of the database are stored on the variable contacts.
I map through the array. Person.js component used. */}
<ul>
{contacts.map(person =>
//Pass all the props from person to Person.js
<Person
key={person.id}
person={person}
/>
)}
</ul>
<h2>Filter results</h2>
<FilterResults persons={row_names()} />
</div>
)
}
export default App
The dabatbase is hardcoded json.
file db.json
"persons": [
{
"name": "ss",
"number": "ssssd",
"id": 17
},
{
"name": "ddd",
"number": "6tyhhth",
"id": 18
},
{
"name": "almejas",
"number": "1234",
"id": 19
},
{
"name": "pailo",
"number": "244",
"id": 20
}
]
}

Answer 1

OK. Once again. To handle API requests you have to build API server first. When you send ajax reqests they must go somewhere, and there must be a program listening requests and doing something what depends on request params and body. The repository you show contains only frontend logic and it is OK because server side logic and front-end can be kept separately and run indepentendly. In the same git account you may find some other reps like this one https://github.com/inci-august/fullstackopen/tree/d6680a40d03536e20ee9537cc64e1cb57dd6b74a/part3/phonebook-backend containing back-end implementation. So you build API server, accepting requests, doing something (create/delete posts, users, auth etc) and sending something back, and AFTER you find it working you can send API requests from frontend. Before front part is created you may use apps like Postman to test your API server.
UPDATE:
You mentioned the following link https://fullstackopen.com/en/part2/altering_data_in_server containing the same I have already said - the server side logic does not suppose to be implemented on this step.
In the next part of the course we will learn to implement our own
logic in the backend. We will then take a closer look at tools like
Postman that helps us to debug our server applications
As for you question - the "props" in requests to server can be sent by params in address string like:
axios.delete("api/person/2")
In the example above we say to server that we want the person with id=2 to be deleted. On the server side it will be catched with instruction like:
router.delete("api/person/:id", (req, res) => {
const id = req.params.id
// here you delete the person information and send response back
})
ID here will be handled by server as parameter and you will have an access to its value for further actions.

Answer 2

The exercise expected me to remove objects from the json database just using axios. Perhaps I did not express myself clarly enough, but I finally solved it.
I just wanted to pass the id to delete of each object to the axios request.
On the return sttement of App.js, I pass the person object as props to deleteContactOf
<ul>
{contacts.map(person =>
//Pass all the props from person to Person.js
//Here you pass the props
<Person
key={person.id}
person={person}
deleteContact={() => deleteContctOf(person)}
/>
)}
</ul>
This is how the function deleteContactOf looks like
//Delete contacts
const deleteContctOf = (person) => {
console.log(person)
console.log('delete contact ' + person.id + ' ????')
if (window.confirm("Do you really want to delete this person")) {
contactService
.remove(person.id)
} else {
return
}
}
deleteContactOf passes the id (person.id) to the axios request on file perons.js
Now the id is passed. That's were I was failing.
const remove = (id) => {
const req = axios.delete(`${baseUrl}/${id}`)
return req.then((res) => res.data)
}
Now by clicking the delete button, the contacts that belong to that id are deleted
<button onClick={deleteContact}>Delete</button>
Thanks for your time effort. Of course this is implemented with APIs in real life. This was just an specific exercise I had to solve.
Thanks