En el componente React, tengo una variedad de libros, al hacer clic en Hide Books , configuro la matriz de datos para que se vacíe, por lo que no se muestra nada en la página, cambie el texto del botón a Show Books
Lo que estoy tratando de lograr es cuando haga clic en el botón con texto Show Books , quiero mostrar datos configurando setBooksData(bookData)
function BookList() { const [booksData, setBooksData] = useState(books); const clearBooks = () => { setBooksData([]); }; return ( <section className="booklist"> {booksData.map((book, index) => { return <Book key={index} {...book}></Book>; })} <button onClick={clearBooks}> {booksData.length === 0 ? "Show Books" : "Hide Books"} </button> </section> ); }Podemos usar otro estado para ocultar y mostrar la lista de libros. En su código, ha hecho que la lista de libros esté vacía, de modo que cuando haga clic en Mostrar libro, la lista de libros estará vacía.
Ahora aquí he usado otro estado para ocultar y mostrar los libros. para mostrar el libro, he agregado dos condiciones para verificar si la matriz del libro tiene datos y si está en el estado de visualización.
function BookList() { const [booksData, setBooksData] = useState(books); const [hideBook,setHidden]=useState(false); const clearBooks = () => { setHidden(!hideBook) }; return ( <section className="booklist"> {!hideBook && booksData.length >0 && booksData.map((book, index) => { return <Book key={index} {...book}></Book>; }) } <button onClick={clearBooks}> {hideBook ? "Show Books" : "Hide Books"} </button> </section> ); }con su lógica, debe alternar el elemento, si tiene una lista y hacer clic en ocultar, se ocultará; de lo contrario, se restablecerá
const BookLists = () => { const [bookLists, setBooksData] = useState(books); const toggleBookList = () => { if (!!bookLists.length) { setBooksData([]); return; } setBooksData(books); }; return ( <section className="booklist"> <ul> {bookLists.map((book, index) => ( <Book key={index} label={book} /> ))} </ul> <button onClick={toggleBookList}> {bookLists.length === 0 ? 'Show Books' : 'Hide Books'} </button> </section> ); }; export { BookLists };Dado que ambos botones tienen una funcionalidad diferente, puede separarlos y asignarles a cada uno sus propias funciones de controlador.
function BookList() { const [booksData, setBooksData] = useState(books); const clearBooks = () => { setBooksData([]); }; const handleShowBook = () => { setBooksData(books); } return ( <section className="booklist"> {booksData.map((book, index) => { return <Book key={index} {...book}></Book>; })} { booksData.length === 0 ? (<button onClick={handleShowBook}> Show Books </button>) : (<button onClick={clearBooks}> Hide Books </button>) } </section> ); }