Propiedades de los componentes

Hasta el momento hemos visto como crear componentes y como utilizarlos en nuestra aplicación. Sin embargo, los componentes que hemos creados son elementos estáticos, es decir, no podemos modificar su contenido una vez que se han creado.

Para poder modificar el contenido de un componente, React nos permite utilizar las propiedades o props (abreviatura de properties). Las props son un conjunto de datos que se le pasan a un componente para que este pueda renderizarlos.

Si se trata de un componente funcional, las propiedades se reciben como parámetro de la función mediante un objeto. Cada propiedad del objeto es un atributo que se le pasa al componente. Por ejemplo, para nuestro componente Task podríamos pasarle el nombre de la tarea y la descripción de la tarea mediante los atributos name y description respectivamente.

function Task({name, description}) {
  return (
        <div>
            <h2>{name}</h2>
            <p>{description}</p>
        </div>
    );
}

Otra manera de realizar esta tarea, la cual es ampliamente utilizada, es recibiendo el objeto props como parámetro de la función y luego acceder a las propiedades que necesitemos.

function Task(props) {
  return (
        <div>
            <h2>{props.name}</h2>
            <p>{props.description}</p>
        </div>
    );
}

Ambas maneras son válidas, pero recomendamos utilizar la primera ya que es más clara y permite desestructurar el objeto props para acceder a las propiedades que necesitemos.

Si se trata de un componente de clase, las propiedades se reciben como parámetro del constructor de la clase. Por ejemplo, para nuestro componente Task podríamos pasarle una propiedad name que contenga el nombre de la tarea y otra propiedad description que contenga la descripción de la tarea.

class Task extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <h2>{this.props.name}</h2>
                <p>{this.props.description}</p>
            </div>
        );
    }
}

Por supuesto, también podemos utilizar la desestructuración del objeto props para acceder a las propiedades que necesitemos.

class Task extends React.Component {
    constructor({name, description}) {
        super({name, description});
    }

    render() {
        const {name, description} = this.props;

        return (
            <div>
                <h2>{name}</h2>
                <p>{description}</p>
            </div>
        );
    }
}

En cualquiera de los dos casos, para utilizar el componente Task debemos emplear los atributos name y description como si se tratase de atributos de HTML.

<Task name="Tarea 1" description="Descripción de la tarea 1" />

Al utilizar el componente Task de esta manera, React se encarga de crear un objeto props con las propiedades que le pasamos y se lo pasa al componente. Por lo tanto, el componente Task recibe un objeto props con los atributos name y description.

Así, podemos redefinir el componente TaskList que vimos en el tema anterior para que utilice el componente Task y le pase las propiedades name y description a cada tarea.

function TaskList() {
    return (
        <div>
            <h1>Lista de tareas</h1>
            <Task name="Tarea 1" description="Descripción de la tarea 1" />
            <Task name="Tarea 2" description="Descripción de la tarea 2" />
            <Task name="Tarea 3" description="Descripción de la tarea 3" />
        </div>
    );
}

De manera similar, podemos redefinir el componente TaskList empleando propiedades para pasarle el nombre de la lista de tareas y un arreglo de tareas.

function TaskList({ name, tasks }) {
    return (
        <div>
            <h1>{name}</h1>
            {tasks.map((task) => (
                <Task name={task.name} description={task.description} />
            ))}
        </div>
    );
}

Ahora, el componente TaskList puede renderizar una cantidad arbitraria de elementos Task a partir de un arreglo de tareas (para lo cual utilizamos el método map) y un nombre para la lista de tareas (que se renderiza como un encabezado h1).

Con este cambio, podemos utilizar el componente TaskList dentro del componente App para renderizar una lista de tareas.

function App() {
    const tasks = [
        { name: "Aprender HTML", description: "Aprender HTML es muy fácil" },
        { name: "Aprender CSS", description: "Aprender CSS puede ser un poco tedioso" },
        { name: "Aprender JavaScript", description: "Aprender JavaScript es muy divertido" },
        { name: "Aprender React", description: "Aprender React es muy interesante, pero puede ser un poco complicado" }
    ];

    return (
        <div>
            <TaskList name="Lista de tareas" tasks={tasks} />
        </div>
    );
}

export default App;

En resumen, las propiedades nos permiten pasar información a los componentes por medio de sus atributos. De esta manera, podemos crear componentes dinámicos que rendericen información diferente cada vez que se utilizan.

Una aplicación React desarrollada apropiadamente empleará siempre propiedades para garantizar la reutilización de componentes y la dinamicidad de la aplicación.

Propiedades por defecto

En ocasiones, es posible que no queramos indicar una propiedad al utilizar un componente o, por alguna razón, no podamos hacerlo. En estos casos, podemos definir un valor por defecto para la propiedad en cuestión y evitar un error en la renderización del componente.

Para definir un valor por defecto para una propiedad de un componente, debemos indicar un operador de asignación (=) seguido del valor por defecto que queremos asignarle a la propiedad. Por ejemplo, para el componente Task podríamos definir un valor por defecto para la propiedad description de la siguiente manera.

function Task({name, description = "Sin descripción"}) {
  return (
        <div>
            <h2>{name}</h2>
            <p>{description}</p>
        </div>
    );
}

De esta manera, si no indicamos la propiedad description al utilizar el componente Task, React utilizará el valor por defecto que definimos en la función.

<Task name="Tarea 1" />

En este caso, el componente Task se renderizará de la siguiente manera.

<div>
    <h2>Tarea 1</h2>
    <p>Sin descripción</p>
</div>