Блог

У меня есть список видеокарт, когда пользователь нажимает на них, они становятся выбранными, и идентификатор каждой видеокарты переносится в массив с именем «selectedList».

Я хочу добавить кнопку «поехали» под карточкой фильма, но условно. Я имею в виду, что когда массив пуст, кнопка не должна отображаться, и когда пользователь нажал хотя бы на фильм, кнопка отображается. массив следует проверять каждый раз, и всякий раз, когда он становится равным нулю, кнопка должна исчезать. дело в том, что все карточки с фильмами являются дочерними элементами этой страницы, и я хочу отобразить родительский компонент на основе поведения детей.

МОЯ ГЛАВНАЯ СТРАНИЦА:

 export default function Index(data) {  const info = data.data.body.result;  const selectedList = [];    return (  lt;gt;  lt;main className={parentstyle.main_container}gt;  lt;NavBar /gt;  lt;div className={style.searchbar_container}gt;  lt;SearchBar /gt;  lt;/divgt;  lt;div className={style.card_container}gt;  {info.map((movie, i) =gt; {  return (  lt;MovieCard  movieName={movie.name}  key={i}  movieId={movie._id}  selected={selectedList}  isSelected={false}  /gt;  );  })}  lt;/divgt;  lt;/maingt;  lt;button className={style.done}gt;Let's go!lt;/buttongt;  lt;/gt;  );  }    **MOVIE CARD COMPONENT:**  export default function Index({ selected, movieName, movieId, visibility }) {  const [isActive, setActive] = useState(false);   const toggleClass = () =gt; {  setActive(!isActive);  };   const pushToSelected = (e) =gt; {  if (selected.includes(e.target.id)) {  selected.splice(selected.indexOf(e.target.id), 1);  console.log(selected);  } else {  selected.push(e.target.id);  console.log(selected);  }  toggleClass();  };   return (  lt;divgt;  lt;img  className={isActive ? style.movie_selected : style.movie}  src={`images/movies/${movieName}.jpg`}  alt={movieName}  id={movieId}  onClick={pushToSelected}  /gt;  lt;h3 className={style.title}gt;{movieName}lt;/h3gt;  lt;/divgt;  ); }  

Для этого вы можете использовать условный рендеринг:

 {selectedList.length gt; 0 amp;amp; lt;button className={style.done}gt;Let's go!lt;/buttongt;}  

Кроме того, вы должны изменить свое selectedList состояние и управлять обновлением с помощью setSelectedList функции:

 import { useState } from 'react';  export default function Index(data) {  const info = data.data.body.result;  const [selectedList, setSelectedList] = useState([]);  

Добавьте метод в свойство MovieCard как свойство:

 lt;MovieCard  movieName={movie.name}  key={i}  movieId={movie._id}  selected={selectedList}  setSelected={setSelectedList}  isSelected={false} /gt;;  

И обновите список в pushToSelected методе:

 export default function MovieCard({   selected,   setSelected,   movieName,   movieId,   visibility  }) {  const pushToSelected = (e) =gt; {  if (selected.includes(e.target.id)) {  selected.splice(selected.indexOf(e.target.id), 1);  console.log(selected);  } else {  selected.push(e.target.id);  console.log(selected);  }  setSelected([...selected]);  toggleClass();  };