Props

Sintácticamente una prop es similar a los atributos de HTML.

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

children

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

const App = _ => (
  <div>
    <Box>Texto 1</Box>
    <Box>Texto 2</Box>
  </div>
);
import React from 'react';

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

Ejercicios props

  1. Ejercicio - props

    Crear un componente llamado Post que debe imprimir el valor de las props postTile, author, 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 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, dentro del fichero App.js recogíamos los datos y ofrecíamos una respuesta en el propio fichero App.js. En esta ocasión vamos a crear un nuevo componente que recibirá el valor y pintará la respuesta. Para ello, le pasaremos el valor mediante props.

  3. Ejercicio coste hotel.
    Haremos una aplicación para calcular el coste de un viaje. Para ello desarrollaremos dos componentes que recibirán como props el número de noches.
    • Componente CosteHotel: múltiplica el número de noches por los 40 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).
    <input type="text" ref={nochesRef} placeholder="noches" onChange={() => {...}}/>
    <CosteHotel noches={nochesState}/>
    <CosteAlquiler noches={nochesState}/>
    

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

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

Las props son constantes, y por tanto, no debemos modificarlas.

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

Inicializando un estado mediante props

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

const App = _ => (
  <Prueba contadorInicial={10} />
);
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.