Как изменить код, чтобы на клике кнопки «Так» в модальном окне добавлялся товар, по которому сделан клик?

Question

[Stud]

Учусь React, помогите пожалуйста

class App extends Component {
state = {
        data: [],
        cards: [],
        carts: [],
        favoriteCards: [],
        isModalOpen: false,
        isButton: true,
        modalProps: {},
    };

    addToCarts = card => {
        this.setState(current => {
            const carts = [...current.carts];

            const index = carts.findIndex(el => el.article === card.article);

            if (index === -1) {
                carts.push({ ...card, count: 1 });
            } else {
                carts[index].count += 1;
            }

            return { carts };
        });
    };

    toggleModal = value => {
        this.setState({ isModalOpen: value });
    };

    render() {
        const { cards, carts, isModalOpen } = this.state;

        return (
            <>
                <Header carts={carts} favoriteCards={favoriteCards} />
                <main>
                    <section className={styles.leftContainer}>
                        <CardsContainer
                            cards={cards}
                            isModalOpen={isModalOpen}
                            toggleModal={this.toggleModal}
                        />
                    </section>

                    <section className={styles.rightContainer}>
                        <h2>Корзина</h2>
                        <CartContainer
                            carts={carts}
                        />
                    </section>
                    <Modal
                        isModalOpen={isModalOpen}
                        toggleModal={this.toggleModal}
                        background="#ff4d4d"
                        header={'Ви хочете додати цей товар у корзину?'}
                        closeButton={true}
                        cards={cards}
                        carts={carts}
                        addToCarts={this.addToCarts}
                    />
                </main>
            </>
        );
    }
}

class Modal extends PureComponent {
    render() {
        const {
            header,
            closeButton,
            background,
            isModalOpen,
            toggleModal,
            cards,
            addToCarts,
        } = this.props;

        if (!isModalOpen) {
            return null;
        }

        return (
            <>
                <div className={styles.wrapper} style={{ background }}>
                    <div className={styles.header}>
                        <h2 className={styles.headerText}>{header}</h2>
                        {closeButton && (
                            <button
                                className={styles.closeBtn}
                                onClick={() => {
                                    toggleModal();
                                }}
                            >
                                X
                            </button>
                        )}
                    </div>
                    <div className={styles.body}>
                        <div className={styles.bodyBtn}>

                            <button
                                className={styles.button}
                                onClick={() => {
                                    addToCarts(...cards);
                                    toggleModal();
                                }}
                            >
                                ТАК
                            </button>

                            <button
                                className={styles.button}
                                onClick={() => {
                                    toggleModal();
                                }}
                            >
                                НІ
                            </button>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

class CardsContainer extends Component {
    render() {
        const { cards, addToCarts, toggleModal } =
            this.props;

        return (
            <>
                <ul className={styles.list}>
                    {cards.map(({ name, prise, url, article, color, isFavorite }) => (
                        <li key={article}>
                            <CardItem
                                name={name}
                                prise={`Ціна: ${prise}`}
                                url={url}
                                article={`Артикул: ${article}`}
                                color={`Колір: ${color}`}
                                setCardFavorite={setCardFavorite}
                                isFavorite={isFavorite}
                                addToCarts={addToCarts}
                                toggleModal={toggleModal}
                                setModalProps={setModalProps}
                            />
                        </li>
                    ))}
                </ul>
            </>
        );
    }
}

class CardItem extends PureComponent {
    render() {
        const {
            name,
            prise,
            url,
            article,
            color,
            toggleModal,
        } = this.props;

        return (
            <>
                <div className={styles.card}>
                    <button
                        type="button"
                        className={styles.btn}
                        onClick={() => {
                            setCardFavorite(url);
                        }}
                    >
                        <img
                            className={styles.likeButton}
                            src={!isFavorite ? star : starFill}
                            alt="favorite"
                        />
                    </button>

                    <h4 className={styles.name}>{name}</h4>
                    <img src={url} alt={name} className={styles.img} />
                    <h5 className={styles.prise}>{prise}</h5>
                    <h5 className={styles.article}>{article}</h5>
                    <h5 className={styles.color}>{color}</h5>
                    <div className={styles.btnContainer}>
                        <Button
                            text="Додати у корзину"
                            backgroundColor="#ff4d4d"
                            onClick={() => {
                                toggleModal(true);
                            }}
                        />
                    </div>
                </div>
            </>
        );
    }
}

Answer 1

[omyraucy]

Почему бы тебе не попробовать функциональные компоненты React? Это во-первых.
Во-вторых, попробуй функцию добавления товара сделать немного по-другому.
Пример:
У тебя есть state.

const state = { cart: [], orders: [], modal: {} } // я буду писать, отталкиваясь от объектного React, чтобы было удобнее читать, но если будут ошибки - сори.

/*
cart - массив с корзиной. В ней хранятся все товары.
orders - массив товаров в ассортименте.
*/

Зададим примерную структуру товара:
В товаре будут следующие поля: id, title (название), description (описание), price (цена), pic (изображение).
Теперь выводим товар. Завернем его в некий div.

Распаковываем массив orders.
{ this.state.orders.map((ord, index) => <div onClick={setState(modal = ord)} key={index} className="order">/*тут распихиваешь другие поля (id, price и т.д.)*/</div>)}

Мы присвоили в modal объект order. Теперь просто пропишем условие, что modal будет появляться только тогда, когда он не равен пустому объекту.

{ Object.keys(modal) > 0 && <Modal data={modal} /> }

Смотрим, является ли объект пустым. Если да, то ничего не делаем. Если нет, то отображаем модальное окно.

Резюмируем: в state добавляем массив с товарами. Его потом перебираем через map и при клике меняем состояние modal с пустого объекта на элемент массива товара. Если клик не произошел, то модальное окно отображаться не будет.

Если надо сделать кнопку закрытия модального окна, то при нажатии кнопки можно просто сделать изменение состояние modal на пустой объект и оно будет закрываться.