You must be a glutton for punishment if you're here following my post on GET
requests with axios.
As long as I have you here, let's recap on what we covered in the last post:
- We created a JSON server to store our contacts.
- Installed and imported axios to our app
- Made an HTTP
GET
request usinguseEffect()
andaxios.get()
In order to create a new resource for storing a contact, we're going to make an HTTP POST
request to the people URL according to RESTful conventions. The data for the new contact will be sent in the body of the request.
const addContact = (e) => {
e.preventDefault()
const nameObj = {
name: newName,
number: newNumber
}
axios.post('http://localhost3001/people', nameObj)
.then(response => {
setPeople(people.concat(response.data))
setNewName('')
setNewNumber('')
})
}
The new contact returned by the backend server
is added to the list of contacts in our app's state by using the setPeople()
function and then resetting the newName
& newNumber
creation form.
In this case, since the data sent in the POST
request is a JavaScript object, axios automatically knows to set the appropriate application/json
value for the Content-Type header. How cool is that? No more typing up those pesky headers.
Take note that the concat()
method is not changing the original state, but instead making a new copy of the list.
Let's add some functionality to edit existing numbers if a contact name
already exists.
const handleSubmit = (e) => {
e.preventDefault()
const exists = people.find(person => person.name === newName)
if(exists) {
const person = people.find(p => p.name === newName)
const confirmChange = window.confirm(`${newName} already exists. Replace old number with a new one?`)
if(confirmChange) {
const id = person.id
const updatedPerson = {...person, number: newNumber}
const url = `http://localhost:3001/people/${id}`
axios
.put(url, updatedPerson)
.then(response => {
setPeople(people.map(p => p.id !== id ? p : response.data))
})
} else {
setPeople(people)
}
} else {
addContact(e)
}
setNewName('')
setNewNumber('')
}
Every line of code in the function body contains important details. Since we're using one single submit button, we're going to handle the logic in the handleSubmit
function.
-
exists
finds if thenewName
field matches a name inside thepeople
array. -
confirmChange
sends a confirmation window to replace an existing contact. - If confirmed, the
if
statement block creates anupdatedPerson
object by using the spread operator and adding the new number. If not, thensetPeople
is run with the original array. - In that same
if
block, our axiosPUT
request is called to the backend where it will replace the old object. - The
map
method inside oursetPeople
function creates a new array by mapping every item from the old array into an item in the new array. In our example, the new array is created conditionally so that ifp.id !== id
is true, we simply copy the item from the old array into the new array. If false, then the note object returned by the server is added to the array instead. - Outside of our nested
if
statement, if the name does not exist, then theaddContact
function is called.
And that's it! We've now successfully made a POST
and PUT
HTTP request with axios. Our code is looking a little bloated now so let's see if we can clean it up a little by creating a separate module that will handle backend communication in another blog post.
Top comments (0)