Los componentes a menudo necesitan mostrar datos diferentes según el lugar donde se utilicen. En React, los datos se pasan a los componentes mediante props. Las props son entradas para un componente. Permiten enviar datos desde un componente padre a un componente hijo y controlar lo que muestra el componente.

En lugar de codificar valores fijos dentro de un componente, las props hacen que los componentes sean reutilizables. El mismo componente puede utilizarse varias veces con datos diferentes, produciendo distintas salidas en la interfaz de usuario.

A continuación se muestra un ejemplo sencillo de cómo pasar datos a un componente utilizando props:

function Greeting(props) {
  return <h2>Hello, {props.name}</h2>;
}

function App() {
  return <Greeting name="Olivia" />;
}

En este ejemplo, el componente App pasa el valor "Olivia" al componente Greeting utilizando una prop llamada name. El componente Greeting recibe estos datos y los muestra en la interfaz de usuario.