Tengo el botón Description . Cuando se hace clic en la descripción se muestra. Ahora quiero agregar Read more/less en la descripción.
Con el código belpw, no veo el botón Description , la descripción se muestra directamente
Flujo: botón Mostrar-> Al hacer clic-> Mostrar texto de 200 caracteres (con la opción Leer más)
const [readMore, setReadMore] = useState(false); const [displaydescription, setDisplayDescription] = useState(false); const clickHandler = () => { setDisplayDescription(true); }; <p> {displaydescription || readMore ? description : `${description.substring(0, 200)}`} </p>Debe cambiar su código para que primero muestre la descripción y luego en la segunda condición para verificar si desea mostrar el texto completo de esta manera:
const [readMore, setReadMore] = useState(false); const [displaydescription, setDisplayDescription] = useState(false); const clickHandler = () => { setDisplayDescription(true); }; <p> {displaydescription ? ( readMore ? description : `${description.substring(0, 200) ) : null}` } </p>La sintaxis para agregar una condición en React jsx es {condición &&} por lo que podría intentar
{ description && !readmore <p> `${description.substring(0, 200)}` <p> } { description && readmore <p> `${description}` <p> }