Estoy tratando de hacer un componente simple para integrarle una función de readmore para reutilizarlo en mi aplicación, pero tengo un problema que no entiendo. Después de varias búsquedas, me pregunto si esto no es una sutileza de NextJS. ¿Alguien tiene una idea? Gracias
import React, { useState } from 'react'; const ReadMore = ({ limit, children }) => { const text = children; const [isReadMore, setReadMore] = useState(false); const toggleBtn = () => { setReadMore((prevState) => !prevState); }; return ( <div> {isReadMore ? text : text.substr(0, limit)} <button onClick={toggleBtn}> {isReadMore ? 'Réduire' : '... en savoir +'} </button> </div> ); }; export default ReadMore; using readmore in a component <ReadMore limit={200}> <p> Lorem ipsum dolor sit amet, consectetur lorem, sed do eiusmod tempor incididunt ut lab lorem. Ut enim ad minim veniam,Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis consectetur molestias provident perferendis voluptates veniam accusantium, quibusdam quod, dignissimos iusto, eum error itaque ab harum. Illum sequi neque consequuntur fugit Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio consectetur sit dolores, beatae error ipsum eos est quidem, soluta nobis, perferendis voluptatum? Dolor similique minus assumenda doloremque corrupti aliquam nulla. </p> </ReadMore>````Sugeriría agregar text como accesorio y no usar niños ya que los niños no son una cadena (como señaló Akshit ).
import React, { useState } from 'react'; const ReadMore = ({ limit, text }) => { const [isReadMore, setReadMore] = useState(false); const toggleBtn = () => { setReadMore((prevState) => !prevState); }; return ( <div> <p> {isReadMore ? text : text.substr(0, limit)} </p> <button onClick={toggleBtn}> {isReadMore ? 'Réduire' : '... en savoir +'} </button> </div> ); }; export default ReadMore; // <ReadMore limit={200} text={text}>