¿Cómo crear un componente Leer más en ReactJS?

El siguiente ejemplo cubre cómo crear un componente Leer más en React JS usando el gancho useState() .

Requisito previo:

• Conocimientos básicos de npm y comando create-react-app.
• Conocimiento básico de los ganchos useState() React.

Configuración básica: Comenzará un nuevo proyecto usando create-react-app usando el siguiente comando:

npx create-react-app react-read-more

Ahora vaya a su carpeta react-read-more escribiendo el comando dado en la terminal.

cd react-read-more

Ahora cree la carpeta de componentes en src, luego vaya a la carpeta de componentes y cree un archivo ReadMore.js .

Estructura del proyecto: La estructura de archivos en el proyecto se verá así.

Ejemplo: en este ejemplo, diseñaremos un componente Leer más, para eso necesitaremos manipular el archivo App.js y otros archivos de componentes creados.

Mostrar y ocultar texto, ahí es donde entra en juego el papel del gancho useState() . Creamos un componente funcional Read More() en el que creamos un estado con el primer elemento isReadMore como estado inicial que tiene un valor de verdadero y el segundo elemento como función setIsReadMore() para actualizar el estado. Luego se crea una función con el nombre toggleReadMore que establece el valor del estado isReadMore en el opuesto de su valor actual cada vez que se llama.

El valor de state isReadMore decide cuánto texto se debe mostrar con la ayuda de un operador condicional. Cuando el valor de nuestro estado es verdadero, solo muestra los primeros 150 caracteres de nuestro texto con la ayuda de string.slice() . Puede elegir cualquier número de caracteres según su elección. Y también se muestra un enlace ‘leer más’ al final. De lo contrario, muestra el texto completo y un enlace ‘mostrar menos’ al final.

Cuando hacemos clic en el enlace ‘leer más’, alternarReadMore establece el valor del estado en falso con la ayuda de la función onClick, por lo que vemos el texto completo con un enlace ‘mostrar menos’ al final. Y cuando hacemos clic en el enlace ‘mostrar menos’, establece el valor del estado en verdadero, lo que solo muestra una porción de nuestro texto con un enlace ‘leer más’ al final.

Escribimos nuestro texto en un componente funcional diferente Content() y lo encerramos con una etiqueta <ReadMore> debido a que se convierte en un hijo de la función ReadMore(). Es por eso que primero desestructuramos la propiedad de los niños en la función ReadMore() para que podamos acceder a su valor en nuestra string de texto e implementar la lógica discutida anteriormente.

import React, { useState } from "react";
import "../App.css";
  
const ReadMore = ({ children }) => {
  const text = children;
  const [isReadMore, setIsReadMore] = useState(true);
  const toggleReadMore = () => {
    setIsReadMore(!isReadMore);
  };
  return (
    <p className="text">
      {isReadMore ? text.slice(0, 150) : text}
      <span onClick={toggleReadMore} className="read-or-hide">
        {isReadMore ? "...read more" : " show less"}
      </span>
    </p>
  );
};
  
const Content = () => {
  return (
    <div className="container">
      <h2>
        <ReadMore>
          GeeksforGeeks: A Computer Science portal for geeks. 
          It contains well written, well thought and well explained
          computer science, programming articles and quizzes. 
          It provides a variety of services for you to learn, so thrive
          and also have fun! Free Tutorials, Millions of Articles, Live, 
          Online and Classroom Courses ,Frequent Coding Competitions,
          Webinars by Industry Experts, Internship opportunities, and Job
          Opportunities. Knowledge is power!
        </ReadMore>
      </h2>
    </div>
  );
};
  
export default Content;

.container{
  position: absolute;
  top: 10%;
  left: 23%;
  width: 50%;
}
  
.text{
  display: inline;
  width: 100%;
}
  
.read-or-hide{
  color: rgb(192,192,192);
  cursor: pointer;
}

import Content from './components/ReadMore'
  
function App() {
  return (
     <Content />
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: