Как при добовлении в корзину отключить кнопку той книги, которую добавили?
const Home = () => {
const dispatch = useDispatch();
const books = useSelector(state => state.books.books);
const error = useSelector(state => state.books.error);
const disabled = useSelector(state => state.basket.disabled);
const [basket, setBasket] = useState([]);
useEffect(() => {
dispatch(fetchBooks());
},[dispatch]);
const addBookClick = (id) => {
const addedItems = books
.filter(item => item._id === id)
.map(item => ({
bookId: item._id,
author: item.name,
bookTitle: item.title
}));
setBasket(prev => [...prev, ...addedItems]);
console.log(basket);
};
const removeBookClick = async (id) => {
await dispatch(removeBook(id));
await dispatch(fetchBooks());
};
return (
<Grid style={{display: "flex", justifyContent: "space-between"}}>
<Grid sx={{width: "67%"}}>
{error ? alert(error) : null}
{!books
? <Box sx={{textAlign: 'center'}}><CircularProgress/></Box>
: books.map(item => {
return (
<BookItem
key={item._id}
id={item._id}
name={item.name}
title={item.title}
description={item.description}
img={item.image}
onClickInfo={() => gg(item._id)}
>
<Button size="small" key={item._id}
disabled={}
onClick={() => {addBookClick(item._id)}}
>
Добавить
</Button>
<Button size="small" onClick={() => removeBookClick(item._id)}>Удалить</Button>
</BookItem>
)
})}
</Grid>
<Basket
basket={basket}
/>
</Grid>
);
};