State

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",

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, {useRef} from 'react';

const App = _ =>{
  const [contador, actualizarContador] = useState(1);   
  return <span onClick={() => actualizarContador(contador + 1)} >{contador}</span>
}

export default App;

Ejercicios State

  1. Ahora modificaremos los ejercicios que vimos en la sección de recogida de datos:

    • Calcular grados Fahrenheit
    • Convertir euros en dólares
    • Calcular la superficie de un rectángulo.

    En estos ejercicios estabamos mostrando el resultado en una traza. Ahora lo mostraremos pintándolo en pantalla, utilizando state.

    A continuación, el ejemplo de cómo lo haríamos en el ejercicio de convertir de grados Centígrados a grados Fahrenheit.

    App.jsimport React, { useRef, useState } from 'react';
    
    const App = _ => {
      const gradosCRef = useRef(null);
      const [gradosF, setGradosF] = useState(0);   
    
    
      const calcular = _ =>{
        const gradosC = gradosCRef.current.value;
        setGradosF(gradosC*9/5+32);
      }
    
        return (
          <div className="App">
            <input type="text" ref={gradosCRef}/>
            <button onClick={calcular}>Calcular</button>
            <div>{gradosF}</div>
          </div>
        );
    }
    
    export default App;
    
  2. 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",
    };
    ejercicio imagenes con react
icono de mandar un mail¡Contacta conmigo!
Pablo Monteserín
contacta conmigoPablo Monteserín

Para dudas técnicas sobre los ejercicios de mis cursos es necesario estar suscrito.