React - событие onClick () не отображает информацию о выбранном элементе в функции карты

У меня есть данные, отображающие все элементы в списке. И есть навигационная кнопка, работающая на Click и показывающая 2 варианта (редактировать, удалять). И проблема в том, что когда я нажимаю кнопку навигации по элементам, отображаются все параметры элементов. Он должен вызывать только одну функцию onClick элемента

const [drawerIsOpen, setDrawerIsOpen] = useState(false);

    const closeDrawer = () => {
        setDrawerIsOpen(false)
    }

    const openDrawer = () => {
        setDrawerIsOpen(true);
    }

Ниже представлены визуализированные элементы

bikes.map(bike => {
        <div className="bike-item">
               <small> {bike.title} </small>
        </div>
        <div onClick={()=> openDrawer(bike.id)} className="bike-item__actions_nav">
               <i className="fas fa-ellipsis-v"></i>
        </div>
        <div className={`bike-item__children_actions ${drawerIsOpen && 'visible'}`}>
               <Link to={`/update/${bike.id}`} className="bike-item_actions_icon">
                  Edit
               </Link>
              <Link className="bike-item_actions_icon">
                  Remove
              </Link>
              {drawerIsOpen && <Backdrop transparent onClick={closeDrawer} />}
        </div>

Я знаю, что есть проблема с индексом товара, но практически не могу ее решить.

Вот пример: https://codesandbox.io/s/laughing-fast-swf1o?file=/src/App.js


reactjs javascript
person ramilabbaszade    schedule 20.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

При вызове функции openDrawer вам необходимо отфильтровать велосипеды.

Допустим, у вас есть состояние filteredBikes, которое изначально будет равно для всех ваших мотоциклов.

Затем, когда вы передаете идентификатор выбранного велосипеда в openDrawer, вам необходимо обновить это состояние на основе текущего состояния filteredBikes, выбрав велосипед, идентификатор которого равен переданному.

person Yesset Zhussupov    schedule 20.10.2020
comment
Я не мог этого сделать. Я создал пример здесь, это ссылка на мою точную проблему, проверьте его здесь, пожалуйста. codeandbox.io/s/laughing-fast-swf1o?file = / src / App.js - person ramilabbaszade; 20.10.2020
comment
Понятно, вы не хотите фильтровать, вы просто хотите показать действия на активном байке, верно? Если это так, я бы посоветовал вам изменить состояние с boolean на string | null с начальным состоянием null, а затем передать идентификатор openDrawer, например onClick={() => openDrawer(bike.id)}, тогда в функции вы можете установить активный идентификатор. Затем вы можете изменить drawerIsOpen && "visible" на drawerIsOpen === bike.id или что-то в этом роде. Наконец, вам нужно сбросить состояние, когда вы хотите закрыть меню действий, вызвав closeDrawer и установив состояние на null. - person Yesset Zhussupov; 21.10.2020