Componente de React personalizables usando props

Ya cargamos React y ReactDOM, renderizamos un elemento y lo encapsulamos en un componente. Es hora volver personalizable nuestro componente para que sea útil en varios casos.

Para estamos vamos a aprender que son los props ¿Te acuerdas al hacer nuestro Hola, Mundo! vimos como pasarle atributos a una etiqueta del DOM al usar React.createElement?

Vamos a usar eso mismo para pasarle parámetros a nuestro componente y usarlos para personalizar el resultado.

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

Ese es nuestro componente hasta ahora, vamos a hacer que el Mundo sea personalizable usando props para así poder escribir un Hola, X!, primero cualquier props que reciba nuestro componente va a ser parte de un objeto que recibimos como primer argumento de nuestro componente.

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

Con esto definimos este argumento props que por defecto es un objeto vacío. Luego necesitamos usar el prop que vamos a recibir, el nombre lo podemos definir nosotros, en este caso vamos a usar name.

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

Con esto nuestro <h1> va a tener Hola y lo que pasemos como name o, en caso de no pasar nada, usamos Mundo como estaba antes.

Ahora que ya esta listo nuestro componente es hora de usarlo.

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

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

ReactDOM.render(element, node);

Lo que hicimos es, en vez de pasar null como segundo argumento de React.createElement pasamos un objeto con la propiedad name con el valor que vamos a usar.

Ahora ya tenemos nuestro componente personalizable siendo renderizado.