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
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.
I reproduced somehow your components with a code snippet.
I think your problem is because you are not destructuring props correctly, (id, removeIndividualBook), they should be ({id, removeIndividualBook}).
Here is the link that you can see that it works properly:
Hope this solves your issue!