Getting an "Uncaught TypeError" in a React app

Question

I am new to React and I'm trying to make a "delete button" on my Feedback app for my practice. It should look just like a Feedback app, there's a list of all of my feedback and each feedback has a delete button. I'm successfully showing all of my feedback. Still, I'm currently getting an error around my delete button saying Uncaught TypeError: handleDelete is not a function and I have no idea how to fix it. How can I make it work?

My codes are as follows: for App.js

        import Header from './component/Header';
    import './App.css';
    import { useState } from 'react'
    import FeedbackData from './data/FeedbackData'
    import FeedbackList from './FeedbackList';

    function App() {
     const [feedBack , setFeedback] = useState(FeedbackData)

     const deleteFeedback = (id) => {
      if (window.confirm ('Are you sure you want to delet that?')){
        setFeedback (feedBack.filter((item) => item.id !== id ))
      }
    }
      return (
        <> 
        <Header />
        <div className="App">
        <FeedbackList item ={feedBack} handleDelete ={deleteFeedback}/>
        
        </div>
        </>
      );
    }
    export default App;

and for FeedbackList.js

  import React from "react";
import FeedbackItem from './component/FeedbackItem'

function FeedbackList( feedback , handleDelete ) {

    if (!feedback || feedback.length === 0) {
      return <p>there is no feedback</p>}
    
    return (
      <div className="feedback-list">
  
        {feedback.item.map((item) => (
          <FeedbackItem key={item.id} item ={item}
           handleDelete={handleDelete}
          />
        ))}
      </div>
    );
  }
  

export default FeedbackList;

and for FeedbackItem.js

    

import React from "react";
import Card from "./shared/Card";
import {FaTimes} from 'react-icons/fa'
function FeedbackItem( {item , handleDelete} ) {

    return (
      <Card>
        <div className="num-display">{item.rating}</div>
        <button  className="close" onClick={() => handleDelete(item.id)}>
            <FaTimes color="purple" />
        </button>
        <div className="text-display">{item.text}</div>
      </Card>
    );
  }
  

export default FeedbackItem;

Answer 1

function FeedbackList( {feedback , handleDelete} ) {}

Answer 2

Mahla, you may have just forgot braces on FeedbackList.

function FeedbackList( feedback , handleDelete ) { //old
function FeedbackList({ feedback , handleDelete }) {  // new, with braces

Cheers.

Answer 3

Update FeedbackList.js

 import React from "react";
import FeedbackItem from './component/FeedbackItem'

function FeedbackList({ feedback , handleDelete} ) {

    if (!feedback || feedback.length === 0) {
      return <p>there is no feedback</p>}
    
    return (
      <div className="feedback-list">
  
        {feedback.item.map((item) => (
          <FeedbackItem key={item.id} item ={item}
           handleDelete={handleDelete}
          />
        ))}
      </div>
    );
  }
  

export default FeedbackList;

You were not sending props as object.

Answer 4

FeedbackList component receives item and handleDelete as props from the parent, so you can destructure it like you did.

function FeedbackList({ feedback , handleDelete })
{ ... }

Or

function FeedbackList(props) { 
const { feedback , handleDelete } = props
// also log and see what other things you get props
console.log(props)
{ ... }
}

Or

function FeedbackList(props) { 
console.log(props.feedback)
console.log(props.handleDelete())
{ ... }
}