Как в React сделать disabled кнопке по ID

Как при добовлении в корзину отключить кнопку той книги, которую добавили?

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>
    );
};

Ответы (1 шт):

Автор решения: SwaD

В вашу модель данных для books добавьте флаг "Выбрано"

{
    isChecked: false 
}

При нажатии на кнопку меняйте по ID значение данного атрибута на true

И при рендере проверяйте флаг

<Button size="small" key={item._id}
    disabled={item.isChecked}
    onClick={() => {addBookClick(item._id)}}
>

Второй, плохой вариант, но вариант, проверять при рендере наличие товара в корзине

<Button size="small" key={item._id}
    disabled={!!basket.find((it) => it.bookId === item._id)}
    onClick={() => {addBookClick(item._id)}}
>
→ Ссылка