Delete and Put Requests in create-react-app
In the previous parts of this tutorial, we have learned how to create a Note App using create-react-app and node.js. Now, we will focus on implementing delete and put requests to allow users to delete and update their notes.
Using Axios for API Requests
First, we need to install Axios, a promise based HTTP client for making API requests. Open your terminal and navigate to the client folder of your project. Then, run the following command:
npm install axios
Implementing Delete Request
To implement the delete functionality, we need to add a delete button in the Note component. When the user clicks on the delete button, it will trigger a delete request to the server to remove the note from the database.
// Note.js
import React from 'react';
import axios from 'axios';
const Note = ({ note, deleteNote }) => {
const handleDelete = () => {
axios.delete(`http://localhost:5000/notes/${note._id}`)
.then(() => deleteNote(note._id))
.catch(err => console.log(err));
}
return (
{note.title}
{note.content}
);
}
export default Note;
Implementing Put Request
For the update functionality, we can use a form in the Note component that allows users to edit the title and content of the note. When the user submits the form, it will trigger a put request to update the note in the database.
// Note.js
const Note = ({ note, deleteNote, updateNote }) => {
const [editing, setEditing] = useState(false);
const [updatedTitle, setUpdatedTitle] = useState(note.title);
const [updatedContent, setUpdatedContent] = useState(note.content);
const handleUpdate = () => {
axios.put(`http://localhost:5000/notes/${note._id}`, { title: updatedTitle, content: updatedContent })
.then(() => {
updateNote(note._id, updatedTitle, updatedContent);
setEditing(false);
})
.catch(err => console.log(err));
}
return (
{editing ? (
setUpdatedTitle(e.target.value)} />