43. useState - Creando estados en nuestros componentes
Tutorial: useState - Creando estados en nuestros componentes
Introducción
En este tutorial aprenderás a utilizar el Hook useState de React para crear y gestionar estados en tus componentes funcionales. Usaremos como ejemplo un componente Car que gestiona el estado de encendido/apagado y los kilómetros recorridos.
Paso 1: Estructura del proyecto
Tendrás una estructura similar a esta en tu proyecto:
text
MI-PRIMERA-APP
├── node_modules
├── public
└── src
├── components
│ └── Car.js
├── App.css
├── App.js
└── index.js
Paso 2: Crear el componente Car.js
Crea un archivo Car.js dentro de la carpeta components:
jsx
// Car.js
import React from "react";
export default function Car() {
return (
<div>
<h2>Nuestro coche está: </h2>
</div>
);
}
Paso 3: Importar el componente en App.js
Ahora importa y usa el componente Car dentro de App.js:
jsx
// App.js
import React from "react";
import Car from "./components/Car";
import "./App.css";
function App() {
return (
<div>
<h1>React Hook useState</h1>
<Car />
</div>
);
}
export default App;
Paso 4: Agregar un botón y estado inicial
Vamos a agregar un botón para encender/apagar el coche y un estado para controlar este valor:
jsx
// Car.js
import React, { useState } from "react"; // Importamos useState
export default function Car() {
const [started, setStarted] = useState(false); // Estado inicial: false (apagado)
const checkStateCar = () => {
if (started) {
return "Encendido";
}
return "Apagado";
};
return (
<div>
<h2>Nuestro coche está: {checkStateCar()} </h2>
<button>Encender / Apagar</button>
</div>
);
}
Nota: useState devuelve un array con dos elementos: el valor actual del estado y una función para actualizarlo.
Paso 5: Cambiar el estado al hacer clic
Ahora vamos a hacer que el botón cambie el estado del coche:
jsx
<button
onClick={() => {
setStarted(!started); // Cambia al valor contrario
}}
>
Encender / Apagar
</button>
Al hacer clic, el estado started cambiará entre true y false.
Paso 6: Mejorar la presentación con colores
Podemos mejorar la visualización del estado usando colores:
jsx
const checkStateCar = () => {
if (started) {
return <span style={{ color: "green" }}>Encendido</span>;
}
return <span style={{ color: "red" }}>Apagado</span>;
};
Paso 7: Agregar un segundo estado (kilómetros)
Podemos tener múltiples estados en un componente. Agreguemos uno para los kilómetros:
jsx
const [countKm, setCountKm] = useState(0); // Estado para kilómetros
return (
<div>
<h2>Nuestro coche está: {checkStateCar()} </h2>
<h2>Kilómetros recorridos: {countKm} km</h2>
<button
onClick={() => {
setStarted(!started);
}}
>
Encender / Apagar
</button>
<button
onClick={() => {
setCountKm(countKm + 1);
}}
>
Incrementar kilómetros
</button>
</div>
);
Paso 8: Validar lógica de negocio
No deberíamos poder aumentar los kilómetros si el coche está apagado. Vamos a agregar una validación:
jsx
const increaseKm = (num) => {
if (started) {
setCountKm(countKm + num);
} else {
alert("El coche está apagado.");
}
};
// Y en el botón:
<button onClick={() => increaseKm(5)}>
Incrementar kilómetros (+5)
</button>
Resultado final del componente Car.js:
jsx
import React, { useState } from "react";
export default function Car() {
const [started, setStarted] = useState(false);
const [countKm, setCountKm] = useState(0);
const checkStateCar = () => {
if (started) {
return <span style={{ color: "green" }}>Encendido</span>;
}
return <span style={{ color: "red" }}>Apagado</span>;
};
const increaseKm = (num) => {
if (started) {
setCountKm(countKm + num);
} else {
alert("El coche está apagado.");
}
};
return (
<div>
<h2>Nuestro coche está: {checkStateCar()} </h2>
<h2>Kilómetros recorridos: {countKm} km</h2>
<button
onClick={() => {
setStarted(!started);
}}
>
Encender / Apagar
</button>
<button onClick={() => increaseKm(5)}>
Incrementar kilómetros (+5)
</button>
</div>
);
}
Conclusión
Con useState puedes:
Crear estados locales en componentes funcionales.
Actualizar estados sin recargar la página.
Tener múltiples estados independientes en un mismo componente.
Sincronizar la interfaz de usuario con los datos.
Este es solo el comienzo. Con useState y otros Hooks de React puedes construir aplicaciones dinámicas y reactivas de manera sencilla.
¡Espero que te haya sido útil! Si tienes dudas, no dudes en contactarme. Nos vemos en el siguiente tutorial.
Comentarios
Publicar un comentario