Agregando Interactividad con Estado

Exploremos cómo React nos ayuda a agregar interactividad con estado y manejadores de eventos (event handlers).

Como ejemplo, creemos un botón "Me gusta" dentro de tu componente HomePage. Primero, agrega un elemento button dentro de la declaración return():

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button>Like</button>
    </div>
  );
}

Escuchando eventos

Para que el botón haga algo al hacer clic, puedes usar el evento onClick:

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

En React, los nombres de eventos usan camelCase. El evento onClick es uno de los muchos eventos posibles que puedes usar para responder a la interacción del usuario. Por ejemplo, puedes usar onChange para campos de entrada o onSubmit para formularios.

Manejando eventos

Puedes definir una función para "manejar" eventos cuando se activan. Crea una función antes de la declaración return llamada handleClick():

function HomePage() {
  // ...
 
  function handleClick() {
    console.log("incrementar contador de me gusta")
  }
 
  return (
    <div>
      {/* ... */}
	  <button onClick={}>Like</button>
    </div>
     )
   }

Luego, puedes llamar a la función handleClick cuando se active el evento onClick:

function HomePage() {
  // 	...
  function handleClick() {
    console.log('incrementar contador de me gusta');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

Prueba esto en tu navegador. Observa en las herramientas de desarrollo cómo aumenta el registro.

Estado y hooks

React tiene un conjunto de funciones llamadas hooks. Los hooks te permiten agregar lógica adicional como estado a tus componentes. Puedes pensar en el estado como cualquier información en tu UI que cambia con el tiempo, generalmente activada por la interacción del usuario.

Puedes usar estado para almacenar e incrementar el número de veces que un usuario ha hecho clic en el botón "Me gusta". De hecho, el hook de React usado para manejar el estado se llama: useState()

Agrega useState() a tu proyecto. Devuelve un array, y puedes acceder y usar esos valores dentro de tu componente usando desestructuración de arrays:

function HomePage() {
  // ...
  const [] = React.useState();
 
  // ...
}

El primer elemento del array es el valor del estado, que puedes nombrar como quieras. Se recomienda darle un nombre descriptivo:

function HomePage() {
  // ...
  const [likes] = React.useState();
 
  // ...
}

El segundo elemento del array es una función para actualizar el valor. Puedes nombrar la función de actualización como quieras, pero es común prefijarla con set seguido del nombre de la variable de estado que estás actualizando:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState();
 
  // ...
}

También puedes aprovechar para agregar el valor inicial de tu estado likes a 0:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
}

Luego, puedes verificar que el estado inicial funciona usando la variable de estado dentro de tu componente.

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

Finalmente, puedes llamar a tu función actualizadora de estado, setLikes en tu componente HomePage, agreguémosla dentro de la función handleClick() que definiste anteriormente:

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

Hacer clic en el botón ahora llamará a la función handleClick, que a su vez llama a la función actualizadora de estado setLikes con un único argumento del número actual de likes + 1.

Nota: A diferencia de las props que se pasan a los componentes como el primer parámetro de la función, el estado se inicia y almacena dentro de un componente. Puedes pasar la información del estado a componentes hijos como props, pero la lógica para actualizar el estado debe mantenerse dentro del componente donde se creó inicialmente el estado.

Gestionando el estado

Esto fue solo una introducción al estado, y hay mucho más que puedes aprender sobre la gestión del estado y el flujo de datos en tus aplicaciones React. Para aprender más, te recomendamos revisar las secciones Agregando Interactividad y Gestionando el Estado en la documentación de React.

Recursos adicionales:

• Estado: La memoria de un componente
• Conoce tu primer hook
• Respondiendo a Eventos