Sergio Xalambrí
February 26, 2019

# Componente de React personalizables usando props

Los props nos permiten crear componentes de React que sean personalizables y que nos sirven para muchos más casos

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.

###### Read next: Props con valores predefinidos en React

Es muy común querer tener props con valores por defecto en nuestros componentes de React, veremos varias formas de lograr este objetivo.