What is the purpose of props in a React component?

Props (short for properties) in a React component serve the purpose of passing data and event handlers from a parent component to a child component. They allow components to be dynamic and reusable by enabling them to receive different values and configurations.

Here are some key points about props:

1. Data Flow: Props facilitate a unidirectional data flow, meaning data is passed down from parent to child components.

2. Customization: They allow you to customize child components by providing different values, making components more flexible.

3. Read-Only: Props are read-only, meaning a child component cannot modify the props it receives. This helps maintain a predictable data flow.

4. Functionality: You can pass functions as props to enable child components to communicate with their parents, such as handling events.

Here’s a simple example:

function ChildComponent({ message }) {
  return <h1>{message}</h1>;
}

function ParentComponent() {
  return <ChildComponent message="Hello, World!" />;
}

In this example, ParentComponent passes a message prop to ChildComponent, which then displays it.