Реагировать - перебрать массив объектов и выделить выбранный элемент на клике

Question

У меня есть массив объектов, который содержит данные, которые я выводил в DOM, используя карту.Каждый элемент в списке имеет прослушиватель событий onClick.Когда вы нажимаете на один из элементов, я хочу, чтобы он был выделен путем добавления класса CSS, например, «hover».Так что в основном это должно работать как система меню.Когда вы нажимаете на элемент, этот элемент выделяется, а остальные не должны выделяться, и наоборот.

При настройке этого элемента все элементы в списке выделяются, чтоне та логика, которую я пытаюсь сделать.Я использовал console.log, чтобы показать, какой элемент был нажат.Тем не менее, я до сих пор не понял, как сделать выбранный элемент, который будет выделен вместо всего списка?

import React, { Component } from 'react';

class MenuSelector extends Component {
    state = {
        active: false,
        menu: [
            {
                id: 1,
                fighterName: 'Goku',
                race: 'Sayian',
                specialAttack: 'Kamehameha Wave',
                img: 'https://nerdist.com/wp-content/uploads/2018/01/Dragon-Ball-Super-Goku.jpg'
            },
            {
                id: 2,
                fighterName: 'Vegeta',
                race: 'Sayian',
                specialAttack: 'Final Flash',
                img: 'https://imgmr.com/wp-content/uploads/2016/04/Vegeta-SSGSS-2.png'
            },
            {
                id: 3,
                fighterName: 'Gohun',
                race: 'Human',
                specialAttack: 'Masenko',
                img: 'https://techanimate.com/wp-content/uploads/2017/11/Why-does-Gohan-Have-so-much-Hidden-Power-1024x576.jpg'
            },
            {
                id: 4,
                fighterName: 'Krillin',
                race: 'Human',
                specialAttack: 'Destructo Disc',
                img: 'https://static3.srcdn.com/wordpress/wp-content/uploads/2016/09/Krillin-Destructo-Disk.jpg'
            },
            {
                id: 5,
                fighterName: 'Android 17',
                race: 'Android',
                specialAttack: 'Barrier',
                img: 'https://i.ytimg.com/vi/SzAiIy_Dnb4/maxresdefault.jpg'
            },
            {
                id: 6,
                fighterName: 'Jiren',
                race: 'Unknown',
                specialAttack: 'Eye Paralysis',
                img: 'https://vignette.wikia.nocookie.net/dragonuniverse/images/9/9c/Jiren.png/revision/latest/scale-to-width-down/2000?cb=20180211002429'
            },
            {
                id: 7,
                fighterName: 'Lord Beerus',
                race: 'God',
                specialAttack: 'Hakai',
                img: 'https://vignette.wikia.nocookie.net/dragonuniverse/images/3/30/Beerus2.png/revision/latest?cb=20170225064338'
            },
            {
                id: 8,
                fighterName: 'Cell',
                race: 'Android',
                specialAttack: 'Kamehameha Wave',
                img: 'https://static0.srcdn.com/wordpress/wp-content/uploads/Dragon-Ball-Z-Perfect-Cell.jpg'
            },
            {
                id: 9,
                fighterName: 'Frieza',
                race: 'Unknown',
                specialAttack: 'Finger Blasters',
                img: 'https://i.ytimg.com/vi/BkoOw_7JqKg/maxresdefault.jpg'
            },
            {
                id: 10,
                fighterName: 'Black Goku',
                race: 'Sayian',
                specialAttack: 'Ki Blade',
                img: 'https://pm1.narvii.com/6287/eafbdf4dc0ae1b58d3869b89be04bcd0712f7623_hq.jpg'
            },
        ]
    }
    toggleClass = (id) => {
        console.log(`Clicked item ${id}`, this);

        const currentState = this.state.active;
        this.setState({ active: !currentState });
    };

    selectHandler = (id) => {
        console.log(`Clicked item ${id}`);
        console.log(this);

    }

  render() {
    return (
      <div className="container">
        <h1>Menu Selector</h1>
        <div>
        <ul>
            {this.state.menu.map((dragonball, index) => (
                <li key={index} onClick={() => this.toggleClass(dragonball.id)} className={this.state.active ? 'hover': null}>
                <div className="container-dragonball">
                <div className="dragonball-stats">
                <h1>{dragonball.fighterName}</h1>
                <p>Race: {dragonball.race}</p>
                <p>Special Attack: {dragonball.specialAttack}</p>
                </div>
                <div className="dragonball-img"><img src={dragonball.img} alt={dragonball.fighterName} /></div>
                </div>
                </li>
            ))}
            </ul>
        </div>
      </div>
    );
  }
}

export default MenuSelector;

Answer 1

Таким образом, вы можете выбрать несколько

 handleSelect = ( id) => {
    const selection = this.state.selected
    if (this.state.selected[id] == 1) {
      selection[id] = 0 //deselect the item
    } else selection[id] = 1 //select the item
    this.setState({ selected: selection }, () =>
      console.log(this.state.selected)
    )
  }

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

<li className={ ` ${this.state.selected[dragonball.id] == 1 && "selected"}` }>

Answer 2

Обновлено toggleClass для добавления selected item id в состояние.

toggleClass = (id) => {

        this.setState({ selectedItemIndex: id });
    };

Теперь, модифицировано li с

className={this.state.selectedItemIndex== dragonball.id? 'hover': null}.

Loop menu и проверьте на selected item id.Добавьте обязательный класс, если есть совпадение для id

    <li key={index} onClick={() => this.toggleClass(dragonball.id)} 
className={this.state.selectedItemIndex== dragonball.id? 'hover': null}>