déjame explicarte mi pregunta. Me gustaría crear tarjetas flexibles en expansión, aquí está el ejemplo en codepen: https://codepen.io/z-/pen/OBPJKK
y aquí está mi código para cada botón: básicamente tengo un componente que se llama HomeButtons que genera todas las tarjetas flexibles. Dentro de este componente tengo un componente más pequeño llamado readMore. En este componente tengo un estado de uso que me permite alternar individualmente cada botón para agregar o recuperar una clase activa. Si la clase activa está presente, eso significa que el botón seleccionado debe expandirse y los otros deben reducirse.
Lo que me gustaría hacer es acceder al estado readMore fuera del subcomponente readMore. De esa manera, podría escribir una función para eliminar la clase activa de una tarjeta si el usuario hace clic en otra tarjeta así:
function setToUnactive() { if (readMore(true)) { readMore(false)} }Mi pregunta es ¿cómo puedo obtener el estado de readMore fuera del subcomponente readMore? ¿Necesito usar useContext? Porque eso parece muy simple de hacer, pero probé muchas cosas y nada funciona. ¿Puedo pasar el estado readMore como accesorio del componente ReadMore? Gracias !
import React, { useState } from 'react'; import '../style/catalogue.scss'; import collectionsItems from '../Components/collectionsItemsData'; import { Link } from "react-router-dom"; const HomeButtons = ({}) => { function ReadMore() { const [readMore, setReadMore] = useState(false) function toggleSetReadMore() { setReadMore(!readMore) } return ( <p className='showmore' onClick={toggleSetReadMore} className={readMore ? "collection-item active" : "collection-item"}>TOGGLE BUTTON</p> ) } return <div> {collectionsItems.map((collectionItem) => { const { id, category, img } = collectionItem; return < article key={id} > <img className="item-img" src={img} alt=''/> <ReadMore /> <Link to={`/${category}`} className="item-title">{category}</Link> </article> })} </div> } export default HomeButtons;¡En primer lugar, debe extraer el componente ReadMore de la función externa! Y para su problema, puede levantar el estado ( https://reactjs.org/docs/lifting-state-up.html ). Y dado que al mismo tiempo solo se puede abrir un elemento, puede hacer algo como esto:
function ReadMore({ isOpened, setOpened }) { return ( <p onClick={setOpened} className={isOpened ? "collection-item active" : "collection-item"} > TOGGLE BUTTON </p> ); } const HomeButtons = () => { const [openedItemId, setOpenedItemId] = useState(null); return ( <div> {collectionsItems.map((collectionItem) => { const { id, category, img } = collectionItem; return ( <article key={id}> <img className="item-img" src={img} alt="" /> <ReadMore isOpened={openedItemId === id} setOpened={() => setOpenedItemId(id)} /> <Link to={`/${category}`} className="item-title"> {category} </Link> </article> ); })} </div> ); };