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, …}