Как я могу изменить переменную в для l oop с помощью щелчка мышью? Реагировать на файл jsx

Question

Я немного новичок в Reactjs, и я пытаюсь создать веб-сайт для моего друга, и я работаю над частью меню, и я создал словарь всех элементов, и я ' Я пытаюсь заставить кнопку зарядить переменную для l oop.

В части

for (const item of CoffeeTea)

я хочу, чтобы часть CoffeeTea сменилась на Espresso, CoffeeTea, et c. с кнопкой onClick. Любая помощь приветствуется.

test.jsx file

    const CoffeeTea = [
    {
        name: 'House Coffee',
        price: '(M) 2.25, (L) 2.50',
        description: '',
    },

    {
        name: 'Iced Coffee',
        price: '(M) 2.55, (L) 2.95',
        description: '',
    },

    {
        name: 'Cold Brew',
        price: '(M) 3.05, (L) 3.70',
        description: '',
    },

    {
        name: 'Iced Tea',
        price: '(M) 2.25, (L) 2.75',
        description: 'Vanilla/Spiced/Sugar Free Vanilla',
    },

    {
        name: 'Iced Green Tea',
        price: '(M) 2.25, (L) 2.75',
        description: '',
    },

    {
        name: 'Blended Iced Coffee',
        price: '(M) 4.25, (L) 4.75',
        description: 'Java Chip, Hazelnut, Vanilla Bean',
    },

    {
        name: 'Chai',
        price: '(M) 4.25, (L) 4.75',
        description: 'Hot Blended',
    },

    {
        name: 'Well Bing Tea',
        price: '(M) 3.95, (L) 4.75',
        description:'Ginger, C',
    },
];

const Espresso =[
    {
        name: 'Americano',
        price: '(M) 2.75, (L) 3.25',
        description: '',
    },

    {
        name: 'Cappuccino',
        price: '(M) 3.75, (L) 4.00',
        description: '',
    },

    {
        name: 'Depth Charge',
        price: '(M) 3.25, (L) 4.00',
        description: '',
    },

    {
        name: 'Macchiato',
        price: '(M) 3.25, (L) 3.75',
        description: '',
    },

    {
        name: 'Espresso',
        price: '(M) 1.75, (L) 2.25',
        description: '',
    },

    {
        name: 'Latte',
        price: '(M) 3.50, (L) 4.00',
        description: '',
    },

    {
        name: 'Caramel Latte',
        price: '(M) 4.00, (L) 4.50',
        description: '',
    },

    {
        name: 'Mocha',
        price: '(M) 4.00, (L) 4.50',
        description: '',
    },

    {
        name: 'White Chocolate Mocha',
        price: '(M) 4.25, (L) 4.75',
        description: '',
    },
];

class Menu extends React.Component {

    render() {
        return(
            <div className="menu border rounded-lg">
                <div className="menuName">{this.props.name}</div>
                <span className="dots"></span>
                <div className="menuPrice">{this.props.price}</div>
                <div className="menuDesc">{this.props.description}</div>
            </div>
        );
    }
}

class MenuContainer extends React.Component {

    render() {
        const menuCard = [];

        for (const item of CoffeeTea) {
            menuCard.push(
                <Menu
                    name={item.name}
                    price={item.price}
                    description={item.description}
                />
            );
        }

        return (
            <div>
                <div className="btn-group">
                    <button className="btn btn-secondary"
                        onClick={() => {
                            this.setState(CoffeeTea);
                        }}
                    >Coffee & Tea</button>
                    <button className="btn btn-secondary"
                        onClick={() => {
                            this.setState(Espresso);
                        }}
                    >Espresso's</button>
                </div>
                <div></div>
                <div>
                    {menuCard}
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <MenuContainer />,
    document.getElementById('app')
);

menu.htl

<div class="container-fluid">
<div class="row">
    <div class="col-sm">
        <div id="app"></div>
    </div>
</div>
</div>

Answer 1

Вам необходимо добавить выбранные данные в состояние реакции. Изначально вы можете установить:

constructor(props) {
    super(props);
    this.state = {
      data: CoffeeTea
    };
  }

и обновить состояние следующим образом:

<button
        className="btn btn-secondary"
        onClick={() => {
          this.setState({ data: Espresso });
        }}
      >
        Espresso's
      </button>

Оформить демонстрацию здесь , а также оформить документацию .