Props con valores predefinidos en React

En otro artículo vimos como hacer que nuestro componente sea personalizable usando props. Y definimos un valor como fallback en caso de que este prop no tenga valor definido.

Y aunque funcionó la forma en que lo hicimos es propia de JavaScript mas no de React que posee su propia implementación de como definir valores por defecto de los props.

Hoy vamos a ver como hacerlo junto a otras formas propias de JavaScript.

Forma Actual

function Hello(props = {}) {
  return React.createElement("h1", null, `Hola ${props.name || "Mundo"}!`);
}

Esto es lo que hicimos ayer, la forma en que funciona es que si props.name no existe el operador || va a hacer que se use "Mundo" como valor.

Argumento por defecto

function Hello(props = { name: "Mundo" }) {
  return React.createElement("h1", null, `Hola ${props.name}!`);
}

Esta es otra forma nativa de JavaScript, en este caso estamos haciendo que props por defecto sea un objeto con valores ya definidos en vez de un objeto vacío.

Otra forma similar usando descomposición de objetos es hacer:

function Hello({ name = "Mundo" } = {}) {
  return React.createElement("h1", null, `Hola ${name}!`);
}

En este caso props es un objeto vacío del cual obtenemos la propiedad name sin el resto de posibles valores y esta propiedad definimos que su valor por defecto sea "Mundo".

La Forma de React

function Hello(props) {
  return React.createElement("h1", null, `Hola ${props.name}!`);
}

Hello.defaultProps = {
  name: "Mundo"
};

Por última la forma propia de React es agregando a nuestro componente una propiedad estática llamada defaultProps que es un objeto con todos los props y sus valores por defecto que queramos definir.

De esta forma React al hacer render va a usar estos valores en caso de que estos props no estén definidos.

Con esto ya vimos varias formas de definir valores por defecto, si actualizamos nuestro ejemplo quedaría el siguiente código.

function Hello(props) {
  return React.createElement("h1", null, `Hola ${props.name}!`);
}

Hello.defaultProps = {
  name: "Mundo"
};

const element = React.createElement(Hello, { name: "Sergio" });
const node = document.getElementById("app");

ReactDOM.render(element, node);

Listo, ahora estamos listos para ver los diferentes tipos de datos en React