El renderizado condicional y el renderizado de listas son técnicas fundamentales en React que permiten mostrar elementos dinámicos y optimizar la interfaz según el estado de la aplicación o los datos disponibles.

1. Renderizado condicional

El renderizado condicional nos permite mostrar u ocultar componentes según se cumpla una condición. Esto se puede hacer utilizando if, operadores ternarios, o el operador &&.

• Renderizado condicional con if: Este método es útil si queremos devolver un componente o null para no renderizar nada.

  1function Mensaje({ mostrar }) {
  2  if (!mostrar) {
  3    return null; // No se renderiza nada si mostrar es false
  4  }
  5  return <p>Este es un mensaje visible.</p>;
  6}

• Renderizado condicional con el operador ternario: El operador ternario nos permite elegir entre dos componentes según se cumpla una condición.

  1function Saludo({ esUsuario }) {
  2  return (
  3    <div>
  4      {esUsuario ? <p>Bienvenido, usuario.</p> : <p>Por favor, inicia sesión.</p>}
  5    </div>
  6  );
  7}

• Renderizado condicional con el operador &&: Usamos && para renderizar un componente solo si la condición es verdadera.

  1function Notificacion({ hayNotificacion }) {
  2  return (
  3    <div>
  4      {hayNotificacion && <p>Tienes una nueva notificación.</p>}
  5    </div>
  6  );
  7}

En estos ejemplos:

• if devuelve null para no renderizar nada si la condición no se cumple.
• Operador ternario (condicion ? casoVerdadero : casoFalso) permite elegir entre dos componentes.
• Operador && muestra el componente solo si la condición es true.

2. Renderizado de listas y keys

Para mostrar listas en React, usamos el método .map() que recorre un array y devuelve un componente para cada elemento. Es importante agregar una key única a cada elemento de la lista, ya que esto ayuda a React a identificar cambios y optimizar el renderizado.

Ejemplo de renderizado de listas con keys:

1const nombres = ["Ana", "Luis", "Carlos"];
2
3function ListaDeNombres() {
4  return (
5    <ul>
6      {nombres.map((nombre, index) => (
7        <li key={index}>{nombre}</li>
8      ))}
9    </ul>
10  );
11}

En este caso, cada <li> tiene una key (el index del elemento en el array). Aunque el índice del array se puede usar como key, es mejor usar un identificador único si el array cambia frecuentemente para evitar problemas de renderizado.

3. Ejercicio práctico: Mostrar/ocultar un mensaje y renderizado de lista de tareas

Vamos a crear una pequeña aplicación que:

1. Muestra y oculta un mensaje con un botón.
2. Muestra una lista de tareas, permitiendo agregar y eliminar tareas.

Código completo de la aplicación:

1import React, { useState } from 'react';
2
3function App() {
4  const [mostrarMensaje, setMostrarMensaje] = useState(false);
5  const [tareas, setTareas] = useState([]);
6  const [nuevaTarea, setNuevaTarea] = useState('');
7
8  // Función para alternar la visibilidad del mensaje
9  const toggleMensaje = () => {
10    setMostrarMensaje(!mostrarMensaje);
11  };
12
13  // Función para agregar una nueva tarea
14  const agregarTarea = () => {
15    if (nuevaTarea.trim()) {
16      setTareas([...tareas, nuevaTarea.trim()]);
17      setNuevaTarea('');
18    }
19  };
20
21  // Función para eliminar una tarea por índice
22  const eliminarTarea = (index) => {
23    setTareas(tareas.filter((_, i) => i !== index));
24  };
25
26  return (
27    <div style={{ textAlign: 'center' }}>
28      <h1>Aplicación de Lista de Tareas</h1>
29
30      {/* Mostrar/Ocultar mensaje */}
31      <button onClick={toggleMensaje}>
32        {mostrarMensaje ? 'Ocultar mensaje' : 'Mostrar mensaje'}
33      </button>
34      {mostrarMensaje && <p>Este es un mensaje que se puede ocultar.</p>}
35
36      {/* Input y botón para agregar tareas */}
37      <div style={{ marginTop: '20px' }}>
38        <input
39          type="text"
40          value={nuevaTarea}
41          onChange={(e) => setNuevaTarea(e.target.value)}
42          placeholder="Escribe una tarea"
43        />
44        <button onClick={agregarTarea}>Agregar Tarea</button>
45      </div>
46
47      {/* Lista de tareas */}
48      <ul style={{ listStyle: 'none', padding: 0, marginTop: '20px' }}>
49        {tareas.map((tarea, index) => (
50          <li key={index} style={{ marginBottom: '10px' }}>
51            {tarea}
52            <button
53              onClick={() => eliminarTarea(index)}
54              style={{ marginLeft: '10px' }}
55            >
56              Eliminar
57            </button>
58          </li>
59        ))}
60      </ul>
61    </div>
62  );
63}
64
65export default App;

Explicación del código:

1. Mostrar/Ocultar Mensaje:

   • Usamos el estado mostrarMensaje para controlar si el mensaje es visible o no.
   • Al hacer clic en el botón, alternamos el estado mostrarMensaje, mostrando o ocultando el mensaje con el operador &&.

2. Agregar y Eliminar Tareas:

   • nuevaTarea guarda el valor del input.
   • agregarTarea agrega el texto ingresado a la lista tareas cuando el usuario hace clic en el botón, siempre que nuevaTarea no esté vacío.
   • eliminarTarea elimina la tarea específica al hacer clic en su botón "Eliminar", usando el índice como referencia.

3. Renderizado de la Lista de Tareas:

   • Usamos .map() para recorrer tareas y renderizar cada tarea como un elemento <li>.
   • Cada tarea tiene un botón de "Eliminar" que permite quitarla de la lista.

Este ejercicio cubre el renderizado condicional y el renderizado de listas en React, mostrando cómo se puede crear una interfaz dinámica y reactiva que responde a las acciones del usuario.