BIS601 FSD - What are props and why should we use them?

 

What Are Props?

• Props are read-only.
  
  

• Props allow you to customize child components.
  
  

• You pass props like HTML attributes, and access them inside the child component using props.name, props.title, etc.

Why Use Props?

To reuse components with different data without rewriting them.

Greeting.jsx

import React from 'react';

function Greeting(props) {

  return <h2>Hello, {props.name}!</h2>;

}

export default Greeting;

App.jsx

import React from 'react';

import Greeting from './Greeting';

function App() {

  return (

    <div>

      <h1>Props Example</h1>

      <Greeting name="Alice" />

      <Greeting name="Bob" />

    </div>

  );

}

export default App;

Output:

Props Example

Hello, Alice!

Hello, Bob!

Key Notes:

• Props are passed like attributes: <Greeting name="Alice" />
  
  

• Props are received as an object inside the function: props.name
  
  

Props make components dynamic and reusable