Props in React

This content originally appeared on DEV Community and was authored by Kavya S

What is Props?

• Props are properties that are used to pass information from one component to another.
• The main purpose of props is to allow a parent component to send data to its child components.

Why props?

• Pass data from parent to child components
• Enable inter-component communication
• Create clear data flow channels

Example

// Parent Component
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

// Child Component receiving props
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Output

Hello, Alice!
Hello, Bob!
Hello, Charlie!

This content originally appeared on DEV Community and was authored by Kavya S