Introducción a Props en React: Pasando Datos entre Componentes

¿Qué son las Props en React?

Como ya hemos visto React es una biblioteca de JavaScript ampliamente utilizada para la construcción de interfaces de usuario interactivas y dinámicas. Una de las características fundamentales de React es la capacidad de dividir la interfaz de usuario en componentes reutilizables y, para que estos componentes sean verdaderamente versátiles, necesitamos una forma de pasar datos entre ellos. Aquí es donde entran en juego las «props» (abreviatura de «propiedades»).

Las props en React son un mecanismo fundamental para pasar datos de un componente a otro. Son simplemente objetos JavaScript que contienen información que un componente hijo necesita para renderizarse correctamente. Las props son inmutables, lo que significa que no se pueden modificar desde dentro del componente hijo.

¿Por qué son Importantes las Props?

Las props desempeñan un papel crucial en la reutilización de componentes y la construcción de aplicaciones escalables y mantenibles. Permiten que los componentes se vuelvan genéricos, ya que pueden recibir diferentes datos cada vez que se utilizan. Esto significa que un componente puede utilizarse en múltiples partes de una aplicación, pasando diferentes props según sea necesario.

Pero…¿de donde vienen?

Las props son proporcionadas por el componente padre al componente hijo.

El componente padre es responsable de definir las props y pasarlas al componente hijo cuando lo renderiza. Estas props pueden contener datos, funciones o cualquier tipo de información que el componente hijo necesite para su renderizado o comportamiento.

Ejemplo de Uso de Props

Para comprender mejor cómo funcionan las props en React, consideremos un ejemplo sencillo de una lista de tareas. Imagina que tienes un componente de lista de tareas y deseas mostrar varias tareas en él. Cada tarea puede tener propiedades como su nombre y estado de completado. Para lograr esto, utilizaríamos props para pasar la información de cada tarea al componente de la lista de tareas.

Recurriremos de nuevo al ejemplo de la lista de tareas para ejemplificar el uso:

import React from 'react';

// Componente de Tarea individual
function Task(props) {
  return (
    <div className="task">
      <input
        type="checkbox"
        checked={props.completed}
        onChange={props.onToggle}
      />
      <span>{props.text}</span>
    </div>
  );
}

// Componente de Lista de Tareas
function TaskList(props) {
  return (
    <div className="task-list">
      <h2>{props.title}</h2>
      {props.tasks.map((task, index) => (
        <Task
          key={index}
          text={task.text}
          completed={task.completed}
          onToggle={() => props.onToggle(index)}
        />
      ))}
    </div>
  );
}

// Componente Principal
function App() {
  const tasks = [
    { text: 'Aprender React', completed: false },
    { text: 'Crear una aplicación', completed: false },
    { text: 'Publicar en mi blog', completed: false },
  ];

  const toggleTask = (index) => {
    const updatedTasks = [...tasks];
    updatedTasks[index].completed = !updatedTasks[index].completed;
    // Actualizar el estado de las tareas
  };

  return (
    <div className="App">
      <h1>Lista de Tareas</h1>
      <TaskList title="Tareas Pendientes" tasks={tasks} onToggle={toggleTask} />
    </div>
  );
}

export default App;

En este ejemplo:

Tenemos dos componentes funcionales: Task y TaskList.
Task representa una tarea individual y recibe props como text, completed y onToggle para mostrar y manejar la tarea.
TaskList representa una lista de tareas y recibe props como title, tasks, y onToggle para mostrar la lista de tareas y manejar el evento de cambio.
El componente principal App define un arreglo de tareas y una función toggleTask para cambiar el estado de una tarea cuando se hace clic en su casilla de verificación.
TaskList se utiliza en App para mostrar la lista de tareas y manejar eventos de cambio.

Este ejemplo muestra cómo los componentes de React pueden comunicarse entre sí a través de props para construir una lista de tareas dinámica, no es necesario que entiendas todo el código, la idea principal que debes retener es que las props son el medio por el que se envía información entre componentes.

Las props se utilizan para pasar datos desde el componente principal (App) a los componentes secundarios (TaskList y Task) para lograr una aplicación interactiva.