как можно зафиксировать в функции переменную id что бы потом по ней отфильтровать нужный объект?(react)

Рейтинг: 0Ответов: 1Опубликовано: 11.06.2023

пожалуйста помогите(, хочу реализовать в своем приложении логику что бы при нажатии на карточку всплывало модальное окно с дополнительной информацией в виде скриншота и описания. Проблема возникла тогда когда я не смогла отфильтровать объекты в массиве по зафиксированному при нажатии id. Подскажите как можно зафиксировать в функции переменную id что бы потом по ней отфильтровать нужный объект. понимаю что нужно сделать функцию, которая будет устанавливать айдишник, а потом вызвать эту функцию внутри handleClick и забирать там айди

у меня handleClick как раз и устанавливает id handleClick(id1) и я его пытаюсь сохранить через let b = id1 можете написать примерно как может выглядеть эта функция и что у меня не правильно

const handleClick = (id1) => {
    let b = id1
    setModalActive(true);
}
return (
    <div className="location-wrapper">
        {films.map(film => (
        <div key={film.id} onClick={() => handleClick(film.id)}{onClick}  >
            <div  className="location-block">
                <div className="location-block-img">
                    <img src={film.poster} alt=""/>
                </div>
                <h3 className="location-block-title ">{film.title}</h3>
                <p className="location-block-text">{film.genre}</p>
            </div>

            const handleClick1 = (id1) => {
             const b = id1}

            {films.filter(film.id === b).map(filtredFilms =>
                <div className={modalActive ? 'myModal active' : 'myModal'} onClick={() => setModalActive(false)}>
                    <div className={cl.myModalContent} onClick={e => e.stopPropagation()}>
                        <img src={film.screenshot} alt=""/>
                        <strong>{film.description}</strong>
                        <img onClick={() => setModalActive(false)} src="крест.png" className={cl.ruki} alt=""/>
                    </div>
                </div>
            )}
        </div>
    ))}
    </div>
);

};

javascript reactjs frontend сортировка
Источник: Stack Overflow на русском

Ответы

▲ 0

Я покажу вам часть моего приложения (todo-list). Логика в том, что у нас есть много элементов и, нажав на один с определенным идентификатором, он будет удален.

onDeleteItem = (id) => {

this.setState(({ todoItems }) => {
  const index = todoItems.findIndex((el) => el.id === id); // находим id элемента
  const newArr = [ // создаем новый массив
    ...todoItems.slice(0, index), // начинается с элемента с id 0, до элемента с найденным индексом
    ...todoItems.slice(index + 1), // мы отображаем следующий элемент
  ];
  return { // возвращаем новый массив,
    todoItems: newArr,
  };
});

};`

Вам не нужно сохранять id в переменную, вы должны передать его как props, и уже оттуда вы будете работать с элементом с этим id.