Tengo una lista de tarjetas de película cuando un usuario hace clic en ellas, se seleccionan y la identificación de cada tarjeta de película se transfiere a una matriz llamada "Lista seleccionada".
Quiero agregar un botón "vamos" debajo de la tarjeta de película, pero de forma condicional. Quiero decir, cuando la matriz está vacía, el botón no debe mostrarse y cuando el usuario hace clic en al menos una película, se muestra el botón. la matriz debe verificarse cada vez y cada vez que se vuelve igual a cero, el botón debe desaparecer. la cosa es que todas las tarjetas de película son los elementos secundarios de esta página y quiero representar el componente principal en función del comportamiento de los elementos secundarios.
MI PAGINA PRINCIPAL:
export default function Index(data) { const info = data.data.body.result; const selectedList = []; return ( <> <main className={parentstyle.main_container}> <NavBar /> <div className={style.searchbar_container}> <SearchBar /> </div> <div className={style.card_container}> {info.map((movie, i) => { return ( <MovieCard movieName={movie.name} key={i} movieId={movie._id} selected={selectedList} isSelected={false} /> ); })} </div> </main> <button className={style.done}>Let's go!</button> </> ); } **MOVIE CARD COMPONENT:** export default function Index({ selected, movieName, movieId, visibility }) { const [isActive, setActive] = useState(false); const toggleClass = () => { setActive(!isActive); }; const pushToSelected = (e) => { 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 ( <div> <img className={isActive ? style.movie_selected : style.movie} src={`images/movies/${movieName}.jpg`} alt={movieName} id={movieId} onClick={pushToSelected} /> <h3 className={style.title}>{movieName}</h3> </div> ); }Puedes usar la representación condicional para eso:
{selectedList.length > 0 && <button className={style.done}>Let's go!</button>} Además, debe cambiar su lista selectedList a un estado y administrar la actualización a través de la función setSelectedList :
import { useState } from 'react'; export default function Index(data) { const info = data.data.body.result; const [selectedList, setSelectedList] = useState([]); Agregue el método a MovieCard como una propiedad:
<MovieCard movieName={movie.name} key={i} movieId={movie._id} selected={selectedList} setSelected={setSelectedList} isSelected={false} />; Y actualice la lista en el método pushToSelected :
export default function MovieCard({ selected, setSelected, movieName, movieId, visibility }) { const pushToSelected = (e) => { 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(); };