1

Soy bastante nuevo en React, estoy siguiendo un curso online y recién vamos dos clases en las que simplemente aprendimos a crear componentes y ahora lo que son las props y como usarlas.

Mi problema es que tengo una app de lista de tareas que si no tiene ningún <ul></ul> con las tareas dentro, muestra un spinner. Lo que quiero hacer es que si existe un <ul></ul> (que en mi caso sería cargado como componente en React) el spinner desaparezca.

Revisé bastante la documentación de React sobre Conditional Rendering pero no lo puedo hacer funcionar, no logro entender cómo hacerlo.

Les comparto el código de mi componente y de la App:

App:

import { useState } from "react";
import "./App.css";
import Lista from "./components/Lista";
import Loader from "./components/Loader";

function App() {
  return (
    <main>
      <h1>Lista de tareas!</h1>
      <form action="javascript:void(0);">
        <input
          id="tarea"
          type="text"
          name="tarea"
          placeholder="Descripción de la tarea"
        />
        <select name="prioridad" id="prioridad">
          <option value="" disabled selected>
            Prioridad
          </option>
          <option value="prioridad-baja">baja</option>
          <option value="prioridad-media">media</option>
          <option value="prioridad-alta">alta</option>
        </select>
        <button id="agregar">Agregar!</button>
      </form>
      <h3>Tareas</h3>
      <Lista
        PrimerTarea="Pasear al toby"
        SegundaTarea="Aprender React"
        TercerTarea="Dormir"
      />
    </main>
  );
}

export default App;

Componente UL:

import React from "react";

function Lista(props) {
  return(
    <ul id="lista-tareas">
      <li className="prioridad-alta">{props.PrimerTarea}</li>
      <li className="prioridad-media">{props.SegundaTarea}</li>
      <li className="prioridad-baja">{props.TercerTarea}</li>
    </ul>
  )
}

export default Lista;

Desde ya perdón si falta más información, al no conocer bien React no sé qué otra cosa podrían necesitar para ayudarme con esto, y también muchas gracias al que se tome el tiempo de leer mi pregunta :).

1
  • una forma sencilla es usando JS, donde obtienes al elemento y verificas que no tenga ningún nodo hijo
    – Christian
    el 9 jul. 2021 a las 0:17

1 respuesta 1

0

Lo que puedes hacer es que en el componente Lista utilices useState() para agregar una variable que sea true o false dependiendo de si la lista <ul></ul> contiene nodos hijo, esta validación la puedes agregar con una función de js que se ejecute por ejemplo, al presionar un botón.

Copie tu código y lo modifiqué un poco, puedes verlo aquí: https://codesandbox.io/s/confident-satoshi-6exyw?file=/src/components/Lista.js:117-162

Después de definir la función creo la variable que será el condicional que determinará si se muestra el spinner o el contenido:

function Lista(props) {
  const [loading, setLoading] = useState(true); // state loading inicia en true

En la parte del render la condicional se usaría así:

return (
    <ul id="lista-tareas">
      {loading ? ( // Con un If ternario evalúas si loading es true o false
        <Spinner /> // Si es verdadero, está cargando, se renderiza el Spinner
      ) : (
        <> // Si es falso no está cargando nada, se renderiza el contenido
          <li className="prioridad-alta">{props.PrimerTarea}</li>
          <li className="prioridad-media">{props.SegundaTarea}</li>
          <li className="prioridad-baja">{props.TercerTarea}</li>
        </>
      )}
    </ul>
  );

Por último estoy usando useEffect() para simular un tiempo de espera de 'carga' de contenido, esto lo puedes sustituir después por una función js que valide el contenido de

    :

      useEffect(() => {
        setTimeout(() => {
          setLoading(false);
        }, 4000);
      }, []);
    

    Lo que hace useEffect() es que cuando la página carga por completo, se ejecuta la función setTimeOut(), lo puse para que modificara el estado de la variable loading a true después de 4 segundos.

    El código completo del componente Lista sería así:

    import React, { useState, useEffect } from "react";
    import { Spinner } from "reactstrap"; // Usando módulo reactstrap para el Spinner
    
    function Lista(props) {
      const [loading, setLoading] = useState(true);
    
      useEffect(() => {
        setTimeout(() => {
          setLoading(false);
        }, 4000);
      }, []);
    
      return (
        <ul id="lista-tareas">
          {loading ? (
            <Spinner />
          ) : (
            <>
              <li className="prioridad-alta">{props.PrimerTarea}</li>
              <li className="prioridad-media">{props.SegundaTarea}</li>
              <li className="prioridad-baja">{props.TercerTarea}</li>
            </>
          )}
        </ul>
      );
    }
    
    export default Lista;
    

    Por último, supongo que es porque es solo un ejercicio de práctica, pero no te recomiendo pasar las props como lo estás haciendo, imagina que tienes 100 tareas, sería demasiado complicado de mantener y manipular.

    <Lista
            PrimerTarea="Pasear al toby"
            SegundaTarea="Aprender React"
            TercerTarea="Dormir"
          />
    

    Te recomiendo este video: https://www.youtube.com/watch?v=iHqa6ojKnHI es la primera parte de 3 donde te enseña hacer una aplicación de tareas por hacer desde 0, el único problema que le veo es que hace uso de clases en lugar de hooks, pero te podría servir.

    Tu Respuesta

    By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

    ¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.