21. Pasando State con Datos

 

Tutorial 21: Pasando State con Datos

📦 Introducción al manejo de estado

Ahora que tenemos los datos de la API, necesitamos almacenarlos en el estado de React para poder:

• ✅ Mantener los datos entre renderizados

• ✅ Actualizar la UI cuando cambien los datos

• ✅ Pasar los datos a otros componentes

• ✅ Reaccionar a cambios en los datos

🎯 Paso 1: Importar useState

Primero, necesitamos importar el hook useState de React:

javascript

// En la parte superior de tu App.js, añade:

import { useState } from "react";

// Asegúrate de que está al inicio del archivo, junto con los otros imports

Tu archivo debería verse así ahora:

javascript

import './App.css';

import imageRickMorty from "./img/rick-morty.png";

import { useState } from "react";  // ← ¡Nuevo import!

🔧 Paso 2: Crear el estado para los personajes

Dentro de tu componente App, justo antes de la función reqApi, crea el estado:

javascript

function App() {

  // Estado para almacenar los personajes

  const [characters, setCharacters] = useState(null);

  

  // Tu función reqApi sigue aquí...

  const reqApi = async () => {

    // ...

  };

  

  return (

    // ...

  );

}

Explicación del código:

• characters: Variable que contiene el valor actual del estado

• setCharacters: Función para actualizar el estado

• useState(null): Inicializamos el estado con null (vacío al inicio)

🔍 Paso 3: Verificar el estado inicial

Vamos a hacer un console.log para ver el estado inicial:

javascript

function App() {

  const [characters, setCharacters] = useState(null);

  

  // Ver estado inicial

  console.log("Estado inicial de characters:", characters);

  

  const reqApi = async () => {

    // ...

  };

  

  return (

    // ...

  );

}

Deberías ver en consola: Estado inicial de characters: null

🚀 Paso 4: Actualizar el estado con los datos de la API

Modifica tu función reqApi para que actualice el estado:

javascript

const reqApi = async () => {

  try {

    // 1. Hacer la petición

    const api = await fetch("https://rickandmortyapi.com/api/character");

    

    // 2. Verificar respuesta

    if (!api.ok) {

      throw new Error(`Error: ${api.status}`);

    }

    

    // 3. Convertir a JSON

    const charactersApi = await api.json();

    

    // 4. Actualizar el estado con los personajes

    setCharacters(charactersApi.results);

    

    // 5. Verificar en consola

    console.log("Estado actualizado con:", charactersApi.results.length, "personajes");

    

  } catch (error) {

    console.error("Error:", error);

  }

};

👁️ Paso 5: Verificar que el estado se actualiza

Vamos a agregar un console.log para ver cuando cambia el estado:

javascript

function App() {

  const [characters, setCharacters] = useState(null);

  

  // Este console.log se ejecuta en cada render

  console.log("Valor actual de characters:", characters);

  console.log("¿Tenemos personajes?:", characters ? "Sí" : "No");

  console.log("Cantidad de personajes:", characters ? characters.length : 0);

  

  const reqApi = async () => {

    // ... función anterior

  };

  

  return (

    // ...

  );

}

🧪 Paso 6: Probar la actualización

1. Abre tu aplicación en el navegador

2. Abre la consola (F12)

3. Observa el estado inicial:

4. text

Valor actual de characters: null

¿Tenemos personajes?: No

5. Cantidad de personajes: 0

6. Haz clic en "Buscar personajes"

7. Deberías ver:

8. text

Valor actual de characters: (20) [{...}, {...}, ...]

¿Tenemos personajes?: Sí

9. Cantidad de personajes: 20

📊 Paso 7: Examinar los datos en el estado

Agrega un console.log más detallado después de actualizar el estado:

javascript

const reqApi = async () => {

  try {

    const api = await fetch("https://rickandmortyapi.com/api/character");

    const charactersApi = await api.json();

    

    // Actualizar estado

    setCharacters(charactersApi.results);

    

    // Datos detallados

    console.log("=== DATOS OBTENIDOS ===");

    console.log("Total en API:", charactersApi.info.count);

    console.log("Obtenidos:", charactersApi.results.length);

    console.log("Primer personaje:", charactersApi.results[0].name);

    console.log("Array completo:", charactersApi.results);

    

  } catch (error) {

    console.error("Error:", error);

  }

};

🔄 Paso 8: Renderizado condicional basado en el estado

Vamos a modificar el JSX para mostrar diferentes cosas según el estado:

javascript

return (

  <div className="App">

    <header className="App-header">

      <h1 className="title">Rick & Morty</h1>

      

      {/* Renderizado condicional */}

      {characters ? (

        <div>

          <h2>Personajes cargados: {characters.length}</h2>

          <p>Aquí irá la lista de personajes...</p>

        </div>

      ) : (

        <>

          <img 

            src={imageRickMorty} 

            alt="Rick & Morty" 

            className="img-home" 

          />

          <button onClick={reqApi} className="btn-search">

            Buscar personajes

          </button>

        </>

      )}

    </header>

  </div>

);

Explicación del renderizado condicional:

• Si characters tiene valor (no es null): Muestra la lista de personajes

• Si characters es null: Muestra la imagen y el botón

🎨 Paso 9: Mejorar la visualización temporal

Vamos a mostrar algo más útil mientras creamos el componente real:

javascript

return (

  <div className="App">

    <header className="App-header">

      <h1 className="title">Rick & Morty</h1>

      

      {characters ? (

        <div>

          <h2>¡Personajes cargados!</h2>

          <p>Total: {characters.length} personajes</p>

          

          {/* Mostrar primeros 3 personajes como prueba */}

          <div style={{ textAlign: 'left', marginTop: '20px' }}>

            <h3>Primeros 3 personajes:</h3>

            {characters.slice(0, 3).map((character, index) => (

              <div key={index} style={{ marginBottom: '10px' }}>

                <strong>{character.name}</strong>

                <br />

                Estado: {character.status} | Especie: {character.species}

                <br />

                Episodios: {character.episode.length}

              </div>

            ))}

          </div>

          

          <button 

            onClick={() => setCharacters(null)} 

            style={{ marginTop: '20px', padding: '10px 20px' }}

          >

            Volver al inicio

          </button>

        </div>

      ) : (

        <>

          <img src={imageRickMorty} alt="Rick & Morty" className="img-home" />

          <button onClick={reqApi} className="btn-search">

            Buscar personajes

          </button>

        </>

      )}

    </header>

  </div>

);

📝 Código completo hasta ahora:

javascript

import './App.css';

import imageRickMorty from "./img/rick-morty.png";

import { useState } from "react";

function App() {

  // 1. Estado para almacenar los personajes

  const [characters, setCharacters] = useState(null);

  

  // 2. Función para obtener datos de la API

  const reqApi = async () => {

    try {

      console.log("Obteniendo personajes...");

      

      const api = await fetch("https://rickandmortyapi.com/api/character");

      

      if (!api.ok) {

        throw new Error(`Error HTTP: ${api.status}`);

      }

      

      const charactersApi = await api.json();

      

      // 3. Actualizar estado con los personajes

      setCharacters(charactersApi.results);

      

      console.log("✅ Estado actualizado con", charactersApi.results.length, "personajes");

      

    } catch (error) {

      console.error("❌ Error:", error);

      alert("No se pudieron cargar los personajes. Intenta nuevamente.");

    }

  };

  

  // 4. Renderizado condicional basado en el estado

  return (

    <div className="App">

      <header className="App-header">

        <h1 className="title">Rick & Morty</h1>

        

        {characters ? (

          // Cuando hay personajes

          <div>

            <h2>¡{characters.length} Personajes Encontrados!</h2>

            <p>Pronto mostraremos todos los personajes aquí...</p>

            

            {/* Botón para volver */}

            <button 

              onClick={() => setCharacters(null)}

              className="btn-search"

              style={{ marginTop: '20px' }}

            >

              ← Volver al inicio

            </button>

          </div>

        ) : (

          // Cuando no hay personajes (estado inicial)

          <>

            <img 

              src={imageRickMorty} 

              alt="Rick & Morty" 

              className="img-home" 

            />

            <button 

              onClick={reqApi} 

              className="btn-search"

            >

              Buscar personajes

            </button>

          </>

        )}

      </header>

    </div>

  );

}

export default App;

🔍 Paso 10: Verificación final

Prueba estos escenarios:

1. Carga inicial:

• Solo imagen y botón

• Estado: characters = null

2. Después de hacer clic:

• Muestra mensaje de personajes cargados

• Estado: characters = array con 20 objetos

3. Volver al inicio:

• Al hacer clic en "Volver", se restablece characters a null

• Vuelve a mostrar imagen y botón

🎯 ¿Qué hemos logrado?

✅ Importamos y usamos useState
✅ Creamos estado para almacenar personajes
✅ Actualizamos el estado con datos reales de API
✅ Implementamos renderizado condicional
✅ Creamos flujo completo: carga → muestra → vuelta

💡 Conceptos importantes aprendidos:

1. Estado de React: Almacena datos que pueden cambiar

2. Hook useState: const [valor, setValor] = useState(inicial)

3. Actualización de estado: setValor(nuevoValor) causa re-render

4. Renderizado condicional: {condicion ? verdadero : falso}

5. Prop drilling (próximo paso): Pasar estado a componentes hijos

🚀 Próximo paso: Componente Characters

En el siguiente tutorial vamos a:

1. Crear un nuevo componente Characters.js

2. Pasar el estado como props a este componente

3. Mostrar todos los personajes de forma organizada

4. Estilizar las tarjetas de cada personaje

---

🧪 Actividad práctica

Modifica tu código para:

1. Mostrar un contador de personajes vivos vs muertos

2. Agregar un botón que muestre solo personajes humanos

3. Implementar un loader mientras se cargan los datos

javascript

// Ejemplo de loader básico

const [loading, setLoading] = useState(false);

const reqApi = async () => {

  setLoading(true);

  try {

    // ... petición a API

  } catch (error) {

    // ... manejo de error

  } finally {

    setLoading(false);

  }

};

// En el render:

{loading ? <p>Cargando...</p> : (/* contenido normal */)}

¿Lograste ver los 20 personajes en el estado de React? ¡Comparte tu progreso! 🌟

---

¿Tienes preguntas sobre cómo funciona el estado en React? ¡Este es el momento perfecto para aclararlas