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

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