Passing Data with Props

Components often need to display different data depending on where they are used. In React, data is passed into components using props. Props are inputs to a component. They allow you to send data from a parent component to a child component and control what the component displays.

Instead of hardcoding values inside a component, props make components reusable. The same component can be used multiple times with different data, producing different UI output.

Below is a simple example of passing data to a component using props:

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

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

In this example, the App component passes the value "Olivia" to the Greeting component using a prop called name. The Greeting component receives this data and displays it in the UI.