Tengo problemas para encontrar una solución o la dirección correcta para mi problema. Por el momento, una vez que haga clic en -> className="List-section" , mostrará la información en -> className="Paragraph-container" , pero hay 4 secciones y quiero hacer eso si hay una abierta , otro cierra. Porque ahora puedo abrir todo entonces, pero solo tiene que abrirse uno a la vez. Si ayuda, aquí está el enlace al prototipo: https://www.figma.com/proto/ooya7hVTx4BvdwQQFPXZcj/CCT-Lab-task?node-id=5%3A711 &scaling=min-zoom&page-id=0%3A1&starting- punto-nodo-id=5%3A509
¡Gracias por toda la ayuda de antemano!
function ListItem({ listNumber, listData }) { const [isShownOne, setIsShownOne] = useState(false); return ( <div className="List"> <div className="List-section" onClick={() => setIsShownOne(!isShownOne)} > <div className="Section-item">{listNumber}</div> <p className="Section-title">{listData.title}</p> </div> {isShownOne && ( <div className="List-paragraph"> {listData.items.map((paragraphItem, index) => ( <div className="Paragraph-container" key={index}> <CheckedIcon /> <p className="Paragraph-item">{paragraphItem}</p> </div> ))} </div> )} </div> ); }Creo que la estructura que tienes aquí no es óptima para este comportamiento que estás buscando.
Yo sugeriría hacer algo como:
function ListItem({ listNumber, listData }) { const [currentSection, setCurrentSection] = useState(0); const totalSections = listData.items.length; const handleOpenSection = () => { const nextSection = currentSection === totalSections ? 0 : currentSection + 1; setCurrentSection(nextSection); } return ( <div className="List"> <div className="List-section" onClick={handleOpenSection} > <div className="Section-item">{listNumber}</div> <p className="Section-title">{listData.title}</p> </div> <div className="List-paragraph"> {listData.items.map((paragraphItem, index) => ( {currentSection === index && <div className="Paragraph-container" key={index}> <CheckedIcon /> <p className="Paragraph-item">{paragraphItem}</p> </div> } ))} </div> </div> ); } Como está manejando 4 secciones, sería imposible implementar este comportamiento usando un valor booleano, por lo que esta sugerencia usa la posición de cada sección en la matriz de items para ver cuál está abierta en ese momento.
La función handleOpenSection es solo una sugerencia que parecía adecuada, ya que no desearía tener una currentSection mayor que el total de secciones que tiene. Además, este código mostraría la primera sección en el primer renderizado, ¡lo cual es algo que quizás no quieras que suceda!
Aquí es donde obtengo datos y paso lógica al componente.
function App() { const data = [ { title: "Build test task", items: [ "Create repositor", "Implement designs", "Implement functionality", ], }, { title: "Submit your test task", items: [ "Open email client", "Sent link information to careers@cornercasetech.com", ], }, { title: "Participate in tech interview", items: ["Talk with HR", "Talk with Tech team"], }, { title: "Reciece anster", items: ["Receive answers", "Start your IT career"], }, ]; return ( <div className="App"> <header className="App-header"> <h1>CCT Lab Process</h1> </header> <div className="App-content"> {data.map((dataObject, index) => ( <ListItem key={index} listData={dataObject} listNumber={index + 1} /> ))} </div> </div> ); }Y aquí es donde supongo que debo estar manejando la lógica de las secciones, que si abres una, la abierta anteriormente se cierra y así sucesivamente.
function ListItem({ listNumber, listData }) { const [isShownOne, setIsShownOne] = useState(false); return ( <div className="List"> <div className="List-section" onClick={() => setIsShownOne(!isShownOne)} > <div className="Section-item">{listNumber}</div> <p className="Section-title">{listData.title}</p> </div> {isShownOne && ( <div className="List-paragraph"> {listData.items.map((paragraphItem, index) => ( <div className="Paragraph-container" key={index}> <CheckedIcon /> <p className="Paragraph-item">{paragraphItem}</p> </div> ))} </div> )} </div> ); }