How do I get the ID of an object from mongodb database in my react application?

Question

I am learning by building. I am building a blog management system using Reactjs, Nodejs, Mongodb. I would like to store some frontend values in the database so that anyone I give admin permission can post, edit and delete such values. These values are website name, sub-name, sidebar bio description, header image and bio image.

This is the code to create the value:

//create new frontend paramters into database
router.post("/", async (req, res) =>{
const newFrontendValues = new Frontend(req.body);//we called the    frontend model we created and we used req.body

try{
    const savedFrontendValues = await newFrontendValues.save()//we tried to save the frontend values created
  
    
    res.status(200).json(savedFrontendValues)
}catch(err){
   res.status(500).json(err)
}

}); 

I wrote the code in node to get the values like this after creating them:

//get frontend parameters
router.get("/:id", async (req, res) =>{
try{
    const frontend = await Frontend.findById(req.params.id)
    res.status(200).json(frontend)
}catch(err){
    res.status(500).json(err)
}
})

my server api code

app.use("/api/frontend", frontend)

In react, I wanted to call the _id of the values but I am lost. I really don't know how to go about that. It is working fine as desired in postman because I can directly implement the value _id. See attached image

But in React, I wanted that to be dynamic.

Here is my React code:

 useEffect(() => {
  const fetchFrontendValue = async () =>{
      const res = await axios.get("/frontend")
      console.log(res.data)
  }
 fetchFrontendValue()
 }, [])

How do I add the _id to this

axios.get("/frontend")

Answer 1

You'd want to look at get request parameters. Usually as a convention, people pass them in the URL. So it would be something like http://localhost:5000/api/frontend?id=617944dc7e00022337a483be78 and on the API side, you'd use req.body.id to pass that to the database. There are other ways to do it too, but this is the most common because some old browser drop the parameters attached to a GET request. Here's a link: https://www.w3schools.com/tags/ref_httpmethods.asp

Answer 2

You should consider going for a complete solution. On a basic level, you should be following these steps

1. Implement a backend route /getall that fetch out all items in DB in this manner

   await Frontend.find({})

2. Render the fetched list on frontend side in a way that each item would be a React UI item and as part of each item, you have the buttons for deleting and updating the item data

   {backendData?.map((item, index)=><SingleItem key={item?._id} data={item} />)}

3. As each SingleItem has update and delete buttona and also the mongodb ID as part of data, so on clicking update and delete button, you will get the id from the data and call relevant DB Url on backend side