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;
CodePudding user response:
function FeedbackList( {feedback , handleDelete} ) {}
CodePudding user response:
Mahla, you may have just forgot braces on FeedbackList.
function FeedbackList( feedback , handleDelete ) { //old
function FeedbackList({ feedback , handleDelete }) { // new, with braces
Cheers.
CodePudding user response:
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.