Props

Contactar con el profesor

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

const Hello = (props) => {
  return <h2>{props.title}</h2>
};
const App = _ => (
  <Hello title="hola pepito"/>
);

children

import React from 'react';
import Box from './components/box';

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

export default App;
import React from 'react';

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>
);

Ejercicios props

1. Ejercicio – props

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

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

2. 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.

Convertir euros en dólares.

Calcular grados Fahrenheit.

Calcular la superficie de un rectángulo.

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.

Para obtener el número de noches del usuario no usaremos useRef. Lo recogeremos utilizando useState, actualizando el estado a medida que escribimos:

<input type="text" onChange={ obj => setNoches(obj.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 />
);

Prop Types

Nos permiten filtrar el tipo de dato que va a almacenar cierta prop. Este tipo de avisos debe estar deshabilitado en producción, son sólo para desarrollo.

npm i prop-types
const Items = (props) => (
  <h1>Quantity: {props.quantity}</h1>
);

Interpretar el HTML de una prop

const App = _ =>(
  <Prueba rawHtml={"<strong>hola</strong>"} />
);

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

Pasar una prop del hijo al padre

app.js
const App = _ => {

const changePadre = param => {
  alert(param);
}

return (
  <div className="App">
    <MiComponente onSomeEvent={changePadre} />
  </div>
);
}

export default App;
Descargar Recurso
miComponente.js
import React from 'react';
export default ({onSomeEvent}) => {

    return (
        <button onClick={() => onSomeEvent(3)}>Pulame</button>
    )
}
← Componentes
Renderizado condicional →

Aviso Legal | Política de privacidad