useState

Contactar con el profesor

Cuando actualizamos una variable state, automáticamente, en caso de ser necesario, el código html vinculado a esa variable es actualizado.

Los hooks (useState y useEffect)fueron introducidos en la versión 16.8 de react. Por tanto, para utilizarlos, deberemos tener al menos esta versión en el package.json

  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",

Modificar un estado

Cuando queremos modificar un estado, utilizaremos el segundo parámetro que devuelve la función useState, que al ejecutarla nos guardará el parámetro que le pasemos como nuevo valor del estado.

import React, {useState} from 'react';

export default () =>{
  const [contador, setContador] = useState(1); 
 
  const incrementarContador = () => setContador(contador + 1)
 
  return <span onClick={incrementarContador}>{contador}</span>
}

Con useState también podemos recoger un valor del usuario

Si queremos recoger un valor introducido por el usuario, también usaremos useState. No obstante, es posible hacer esto utilizando el método useRef, pero dado que este no funciona en ReactNative, no lo vamos a ver.

export default () => {
  const [inputText, setInputText ] = useState('');

    return (
      <div className="App">
        <input type="text" onChange={e => setInputText(e.target.value)} />
        <div>{ inputText }</div>
      </div>
    );
}

En el caso de que quisieramos saber si una checkbox está marcada o no, usaríamos la propiedad checked:

<input type="checkbox" onclick={e=> setEstaMarcado(e.target.checked)}/>

Ejercicios State

Ahora modificaremos los ejercicios que vimos en la sección de useRef para utilizar useState en su lugar.

La solución debe ir imprimendose a medida que vamos introduciendo los datos, sin que sea necesario pulsar ningún botón de “calcular”.

1. Euros a dólares

Hay que realizar un conversor de euros a dólares. Supondremos que un euro son dos dólares. El usuario introducirá un valor en euros y se mostrará un mensaje en pantalla con el correspondiente valor en dólares.

2. Grados centígrados

Hay que realizar un conversor de grados Centígrados a grados Fahrenheit. Supondremos que un euro son dos dólares.

Para ello deberé multiplicar por 9/5 y sumar 32. Como todo el mundo sabe, 20 grados centígrados son 68 grados Farenheit.

Cambiar valor al hacer click en un botón, en lugar de cuando cambia el input

export default () => {
    const [inputText, setInputText] = useState('');
    const [valorAMostrar, setValorAMostrar] = useState(0);

    return (
        <div className="App">
            <input type="text" onChange={e=> setInputText(e.target.value)} />
            <button onClick={() => setValorAMostrar(inputText)}>Cambiar valor</button>
            <div>{valorAMostrar}</div>
        </div>
    );
}

Ejercicios

1. Euros a dólares

Hay que realizar un conversor de euros a dólares. Supondremos que un euro son dos dólares. El usuario introducirá un valor en euros y se mostrará un mensaje en pantalla con el correspondiente valor en dólares.

2. Grados centígrados

Hay que realizar un conversor de grados Centígrados a grados Fahrenheit. Supondremos que un euro son dos dólares.

Para ello deberé multiplicar por 9/5 y sumar 32. Como todo el mundo sabe, 20 grados centígrados son 68 grados Farenheit.

3. Calcular la superficie de un rectángulo

Tendremos un formulario que recogerá el ancho y el alto de un rectángulo y calculará su superficie.

4. Cambia imagen

Desarrollar una aplicación. Al pulsar sobre cada uno de esos botones, debe cargarse la imagen correspondiente a una de las propiedades del siguiente objeto:

const ANIMAL_IMAGES = {
  img1: "http://via.placeholder.com/111x111",
  img2: "http://via.placeholder.com/222x222",
  img3: "http://via.placeholder.com/333x333",
};
← useRef
Componentes en React →

Aviso Legal | Política de privacidad