Usar Props en React

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Sintácticamente una prop es similar a los atributos de HTML. Sirve para transferir información de un componente a otro.

./src/App.js

import Hello from './components/Hello';

const App =() => <Hello title="hola pepito"/>;

export default App;

./src/components/Hello.js

const Hello = (props) => <h2>{props.title}</h2>;

export default Hello;

children

import Box from './components/box';

const App = () => <div>
    <Box>Texto 1</Box>
    <Box>Texto 2</Box>
</div>

export default App;
const Box = (props) => <div>
    {props.children}
</div>;

export default Box;

Destructuring del props

const App = () => <Prueba prop1={3} prop2={4} />;

const Prueba = ({prop1, prop2}) => <div>
    {/* gracias al destructuring no tengo que usar this.props.prop1 para imprimir la propiedad prop1  */}  
    <p>{prop1}</p>
    <p>{prop2}</p>
  </div>;

Error en el linting de Vite con las props

Utilizando Vite y props, podemos ver el siguiente mensaje de error:

'propName' is missing in props validationeslintreact/prop-types

El mensaje nos indica que nos falta validar la prop. Para solventarlo, tenemos dos opciones.

  • Validar la prop.
import PropTypes from 'prop-types';

const MyComponent = ({ name }) => {
    return (
        <div>Cooo {name}</div>
    )
}

MyComponent.propTypes = {
    name: PropTypes.string,
};
export default MyComponent
  • Desactivar la validación de props en el .eslintrc.cjs
rules: {
  "react/prop-types": "off"
}

Ejercicios props

1. Ejercicio props

En este ejercicio, crearemos un comnponente y lo importaremos en el componente principal App.

1. Crear el archivo Book.jsx en la carpeta ./src/components.

2. Después copia este código y complétalo para que devuelva el texto “Viaje a la luna”:

const Book = () =>(
   // Aquí falta código
) 
export default Book;

Ahora haremos uso del componente Book dentro App.js. Completa el componente App.js:

import Book from './componentes/book';
const App = () => {
    return (
        <div><Book/>
        </div>
    );
};
export default App;

El resultado debe ser:

Usar Props en React 1

3. En lugar de harcodear (escribir directamente) el valor del componente en su interior, vamos a pasarselo como prop desde el componente App.

El resultado debería seguir siendo el mismo. Lo único que cambiará será la implementación del código.

En el componente Appi, usaremos este código:

<Book book="Viaje a la luna" />

4. Vamos a leer los libros que mostrará nuestra aplicación desde un fichero JSON. Para ello, importaremos dicho fichero en nuestra aplicación y lo recorreremos con una estructura .map.

Este es el JSON con el array de libros:

./src/data/books.json

[
  {
    "title": "Viaje a la luna",
    "author": "Julio Verne"
  },
  {
    "title": "El médico",
    "author": "Noah Gordon"
  }
]

Para importarlo, usaremos:

./src/App.js

import books from './data/books.json';

El resultado final sería algo así:

Usar Props en React 2

2. Otro ejercicio de props

Crear un componente llamado Post que debe imprimir el valor de las props postTileauthor, y contenido (children).

const App = () => <div>
        <Post postTitle="Viaje a la luna" author="Julio Verne">Texto 1</Post>
        <Post postTitle="Viaje a Marte" author="Pablo Mon">Texto 2</Post>
    </div>;

export default App;

2. Ejercicios de componentes modificados.

Ahora modificaremos los ejercicios que vimos en las secciones anteriores. Vamos a modificar el componente Form para que solamente reciba el valor y pinte la respuesta. Para ello, le pasaremos el valor mediante props. Toda la lógica estará en el componente App.

2.1 Convertir euros en dólares.

2.2 Calcular grados Fahrenheit.

2.3 Calcular la superficie de un rectángulo.

3. Ejercicio coste hotel.

Haremos una aplicación para calcular el coste de un viaje. Para ello desarrollaremos un componente App que tomarará del usuario el número de noches.

Recogeremos el número de noches, utilizando useState:

<input type="text" onChange={ e => setNoches(e.target.value) } />

Luego le pasaremos este valor como prop a dos componentes:

  • Componente CosteHotel: múltiplica el número de noches por los 140 euros que cuesta cada noche.
  • Componente CosteAlquiler:
    • Cada día de alquiler cuesta 40 €.
    • Si alquilas un coche por 3 días o más, obtienes un descuento de 20€ sobre el total.
    • Si alquilas un coche por 7 días o más, obtienes un descuento de 50€ sobre el total (no acumulable con los 20€ de haber alquilado por más de 3 días).

Default props

En caso de que la prop no reciba ningún valor, el default prop será su valor por defecto

const Prueba = (props) => (
  <div>{props.title}</div> 
);

Prueba.defaultProps = {
  title: 'Amor'
}

const App = () => (
  <Prueba />
);

Interpretar el HTML de una prop

Lo que sigue es la única forma que tenemos en React de pasarle código HTML a un componente para que lo interprete y muestre el resultado.

export default () => <Prueba rawHtml={"<strong>hola</strong>"} />;

const Prueba = ({rawHtml}) => <div>
  <div dangerouslySetInnerHTML={{__html: rawHtml}}/>
  {/*El siguiente código no funcionaría*/}
  <div>{rawHtml}</div>
</div>;

Pasar una prop del hijo al padre

App.js
const App = () => {

const changePadre = param =>  alert(param);

return <div>
    <MyComponent onSomeEvent={changePadre} />
  </div>;
}

export default App;
MyComponent.js
const MyComponent = ({onSomeEvent}) => (
   <button onClick={() => onSomeEvent(3)}>Pulame</button>;
)
export default MyComponent;
Descargar código

Ejercicio

1. Programa una aplicación con dos componentes. En uno de ellos, el usuario escribirá dos números y calculará su producto al pulsar el botón de calcular. Ese componente, enviará el resultado de la operación al componente padre que a su vez se la enviará al segundo componente que será el encargado de mostrar la solución.

Usar Props en React 4

2. Desarrollar el siguiente componente:

Usar Props en React 5

Al pulsar el botón de sumar, aumentará una unidad el value que hay en el input del componente, y al pulsar el botón de restar, disminuirá.

Cuando termines este componente, tendrás que hacer que el valor del input sea recogido y mostrado en el componente App:

Usar Props en React 6

Si modificamos directamente el valor del input, el valor recogido en App también debe cambiar.

Los botones de suma y de resta harán dos cosas, actualizarán el valor del input y llamarán a la función del padre. Por tanto, utilizarán una función similar a esta:

const updateVal = (v) => {
    setVal(v);
    onChange(v);
}
← Componentes en React
Virtual DOM →