Buenos días.
Estoy tratando de usar los botones "leer más" en los textos que provienen de la tienda de fuego
<section className="escritos"> {escritos.map(escrito => { return ( <div> <p> Autor: <strong>{escrito.autor}</strong> </p> <p> {" "} Título: <strong>{escrito.titulo}</strong> </p> <div id="obras"> {" "} {readmore ? parse(escrito.escrito) : parse(escrito.escrito.substring(0, 200))} <button id="readmore" onClick={() => setReadmore(!readmore)}> {readmore ? "ler menos" : "ler mais"} </button> <Link to="#beginning"> <BsFillArrowUpCircleFill /> </Link> </div> <hr /> </div> ); })} </section>Esta funcionando. Pero funciona al mismo tiempo para todos los botones.
Ya intenté usar react-read-more , pero hubo un error porque tengo que usar parse(escrito.escrito) para eliminar las etiquetas html. Eliminando el análisis, funciona pero mostrando las etiquetas.
Tiene algo que ver con el mapa , creo, pero aún no he podido resolverlo.
Aquí está el sitio y aquí está el repositorio si ayuda.
Gracias de antemano por su atención y su tiempo.
Dado que desea que el estado de readmore se aplique a los cuadros individuales, puede almacenar una matriz en el estado y verificar si la id está configurada, pero yo elegiría (en mi opinión) la forma más simple:
Extraiga su bloque en su propio componente, que tiene su propio estado readmore como este:
<section className="escritos"> {escritos.map(escrito => ( <Escrito escrito={escrito} key={escrito.id} /> ))} </section> // Escrito.jsx const Escrito = ({escrito}) => { const [readmore, setReadmore] = useState(false); return ( <div> <p> Autor: <strong>{escrito.autor}</strong> </p> <p> {" "} Título: <strong>{escrito.titulo}</strong> </p> <div id="obras"> {" "} {readmore ? parse(escrito.escrito) : parse(escrito.escrito.substring(0, 200))} <button id="readmore" onClick={() => setReadmore(!readmore)}> {readmore ? "ler menos" : "ler mais"} </button> <Link to="#beginning"> <BsFillArrowUpCircleFill /> </Link> </div> <hr /> </div> ); } export default Escrito;Dado que cada componente ahora tiene su propio estado, este debería ser el comportamiento que desea.