¿Qué son las Props?

Reutilizar un componente está muy bien, pero tres estrellas idénticas tienen una utilidad limitada. Las props te permiten pasar datos a un componente, de modo que cada copia pueda ser diferente:

function Greeting({ name }) {
    return <p>Hello, {name}!</p>;
}

export default function App() {
    return (
        <div>
            <Greeting name="Ada" />
            <Greeting name="Alan" />
        </div>
    );
}

Aquí suceden dos cosas:

• Envío: las props se ven como atributos: name="Ada"
• Recepción: el componente las desestructura en su lista de parámetros ({ name }) y las usa en JSX como cualquier variable

Mismo componente, diferentes datos, diferente salida: Hello, Ada! y Hello, Alan!. Las props son la forma en que los padres configuran a sus hijos.