I have removeIndividualBook in index.js which removes individual book. This functionality was working fine from Book component.
I am creating new component Quantity and trying to access removeIndividualBook there. I am passing removeIndividualBook as prop from index.js to Book.js to Quantity.js.
In Quantity.js I am getting Uncaught TypeError: removeIndividualBook is not a function
index.js
// Remove Individual book
const removeIndividualBook = (id) => {
const updatedBookData = booksData.filter((book) => {
return book.id !== id;
});
setBooksData(updatedBookData);
};
<Book key={index} {...book} removeIndividualBook={removeIndividualBook}></Book>
Book.js
const Book = ({description,id,removeIndividualBook}) => {
const clickHandler = () => {
alert(description);
};
<Quantity id={id} removeIndividualBook={removeIndividualBook} />
Quantity.js
const Quantity = (id, removeIndividualBook) => {const Quantity = (id, removeIndividualBook) => {}
return (
<>
<button
className="button" onClick={() => removeIndividualBook(id)}> ------>>> Error
>Solution :
As I can see in your Quantity.js component, your syntax is not good. It should be
const Quantity = ({id, removeIndividualBook}) => {
return (
<>
<button
className="button" onClick={() => removeIndividualBook(id)}>
...
)
the props should be wrapped in { } (destructed). I think that is the problem you are providing.