I'm trying to perform a delete request but I'm facing this error - axios

Question

Front End
import React,{useState, useEffect} from 'react'
import axios from 'axios'
function Renderreview() {
const [renderReview, setRenderReview] = useState([])
useEffect(()=>{
axios.get('/reviews')
.then(res => {
console.log(res)
setRenderReview(res.data)
})
.catch(err => {
console.log(err)
})
},[])
function handleDelete (id){
console.log(renderReview.id)
axios.delete(`/reviews/${renderReview.id}`,)
}
return (
<div className='card1'>
<h2>reviews</h2>
{renderReview.map((renderReview) => {
return(
<div className='renderedreviews'>{renderReview.review}
<button onClick={handleDelete} key={renderReview.review}>Delete</button>
</div>
)
})}
</div>
)
}
export default Renderreview
Back End
def destroy
review =Review.find_by(id: params[:id])
if review.destroy
head :no_content
else
render json: {error: review.errors.messages}, status: 422
end
end
This is the error displaying on my console
DELETE http://localhost:4000/reviews/undefined 500 (Internal Server Error)
Uncaught (in promise)
AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}

Answer 1

Try this, you were not using the correct id:
import React, { useState, useEffect } from 'react'
import axios from 'axios'
function Renderreview() {
const [renderReview, setRenderReview] = useState([])
useEffect(() => {
axios.get('/reviews')
.then(res => {
console.log(res)
setRenderReview(res.data)
})
.catch(err => {
console.log(err)
})
}, [])
function handleDelete(id) {
axios.delete(`/reviews/${id}`,)
}
return (
<div className='card1'>
<h2>reviews</h2>
{renderReview.map((renderReview) => {
return (
<div className='renderedreviews'>{renderReview.review}
<button
onClick={() => {
handleDelete(renderReview.id);
}}
key={renderReview.review}>
Delete
</button>
</div>
)
})}
</div>
)
}
export default Renderreview