Props, PropTypes y DefaultProps en React


*

">

Que es un prop en React?


Que hace un prop en React?

Los props son argumentos que se envian a los componentes de React y estos se pasan a través de atributos HTML. Basicamente podemos enviar informacion desde un componentes a nuestro index a traves de los props y existen dos maneras de que esto ocurra (todos los componentes reciben props)

Caso 1 (Menos comun)
Añadiremos el prop en nuestro componente y pero desde el archivo index enviaremos el prop a el componente

El prop es capturado en el componente recibiendo el valor por defecto que se envia desde el index 

// Archivo HolaMundo.js (componente)
import React from 'react';
const HolaMundo = (props) => {
  return (
    <div>
      <h1> {props.ladrido} </h1>
      <p>Soy un parrafo</p>
    </div>
  );
};
export default HolaMundo; 

 //Archivo Index
import React from 'react';
import ReactDOM from 'react-dom';
import { HolaMundo } from './HolaMundo';
const divRoot = document.querySelector('#root');
ReactDOM.render(
  <HolaMundo ladrido='Guau Guau, por defecto pero desde el archivo index' />,
  divRoot
);
">

Envio del prop desde el componente al index


Como enviar un prop desde un componente?

Caso 2 (Popular):
Añadiremos el prop en nuestro componente, ahora hay que estar atento porque pueden que no envien un valor por defecto desde el archivo index.

Daremos un valor por defecto desde nuestro componente para asegurarnos de no obtener un undefined

Pero este codigo se puede mejorar usando los propTypes 

import React from "react";

const HolaMundo = ({ ladrido = "Guau Guau, por defecto pero desde el componente" }) => {
  return (
    <div>
      <h1> {ladrido} </h1>
      <p>Soy un parrafo</p>
    </div>
  );
};

export default HolaMundo;
">

Validaciones con PropTypes en React

Un truco con propTypes en React

En vez de enviar un valor por defecto desde el componente usaremos los propTypes para validar segun nuestra necesidad.

Podriamos validar el envio de un string, un boolean, number, un array u objeto

Tambien podemos hacer que a traves de los prop Types sea obligatorio ese campo 

import React from 'react';
import PropTypes from 'prop-types';
const HolaMundo = ({ ladrido }) => {
  return (
    <div>
      <h1> {ladrido} </h1>
      <p>Soy un parrafo</p>
    </div>
  );
};
HolaMundo.propTypes = {
  ladrido: PropTypes.string.isRequired,
};
export default HolaMundo;
">

Default Values con defaultProps

Valor por defecto usando defaultProps

Se puede asignar valor por default desde el mismo componente usando los defaultProps

Muchas veces el valor por defecto se deja " " como un valor vacio para indicar en cosola que el prop existe y no se marque como undefined 

import React from "react";
import PropTypes from "prop-types";
const HolaMundo = ({ ladrido, parrafo }) => {
  return (
    <div>
      <h1> {ladrido} </h1>
      <p> {parrafo} </p>
    </div>
  );
};
HolaMundo.propTypes = {
  ladrido: PropTypes.string.isRequired,
};

HolaMundo.defaultProps = {
  parrafo: "Soy un parrafo desde el componente",
};
export default HolaMundo;

Añadir " " indica a react que el valor existe, y que ademas es un string, si no se da un nada como un valor por defecto, saltara el undefinded por lo cual al enviar un string vacio podremos mutarlo luego