Estado independiente
Parte de la sección Fundamentos del Journey de React de Coddy — lección 26 de 42.
¿Necesitas recordar dos cosas? Llama a useState dos veces. Cada llamada crea una pieza de estado completamente independiente:
const [cats, setCats] = useState(0);
const [dogs, setDogs] = useState(0);Actualizar cats vuelve a renderizar el componente, pero dogs mantiene su valor intacto. Cada estado tiene su propio setter, y confundirlos es el error de principiante más común: setCats(dogs + 1) compila bien y aun así es incorrecto.
Desafío
IntermedioManeja el tablero de entrada del refugio: dos contadores que no interfieren.
- Añade dos estados,
catsydogs, ambos comenzando en 0. - Muéstralos en
id="cats"yid="dogs". - El botón
id="add-cat"añade un cat;id="add-dog"añade un dog.
Pruébalo tú mismo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="main.jsx"></script>
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentos
1Conoce React
¿Qué es React?Tu primer componenteRegla del padre únicoJSX no es HTMLRecapitulación: Conoce React2Expresiones JSX
LlavesMatemáticas dentro de las llavesLlaves en atributosLlamada a funciones en JSXRecapitulación: Expresiones JSX5Estado y Eventos
¿Qué es el estado?Contador de clicsContar en pasosAlternar con estadoEstado independienteRecapitulación: Estado y eventos8Proyecto: Tarjeta de perfil
Paso 1: Estructura de la tarjetaPaso 2: Tarjeta con PropsPaso 3: Botón de Me gustaPaso 4: Alternador de Seguir