Using props in JSX in React

Introduction

Props let you send information to components so they can show different things. It is like giving a friend a note with instructions.

You want to show a greeting with a person's name.

You need to reuse a button but with different labels.

You want to display a list of items with different details.

You want to customize a component's color or style from outside.

Syntax

React

function ComponentName(props) {
  return <div>{props.propertyName}</div>;
}

// Or using destructuring
function ComponentName({ propertyName }) {
  return <div>{propertyName}</div>;
}

Props are passed like attributes in HTML: <ComponentName propertyName="value" />.

You can use curly braces {} inside JSX to show JavaScript values.

Examples

This shows a greeting with the name passed as a prop.

React

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage:
<Welcome name="Alice" />

The button text changes based on the label prop.

React

function Button({ label }) {
  return <button>{label}</button>;
}

// Usage:
<Button label="Click me" />

You can pass multiple props to customize content and style.

React

function Message({ text, color }) {
  return <p style={{ color: color }}>{text}</p>;
}

// Usage:
<Message text="Hi there!" color="blue" />

Sample Program

This app shows two greetings with different names using the same Greeting component and props.

React

import React from 'react';

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

export default function App() {
  return (
    <main>
      <Greeting name="Sam" />
      <Greeting name="Lee" />
    </main>
  );
}

Important Notes

Props are read-only inside the component. To change data, use state instead.

Always use meaningful prop names to keep code clear.

Summary

Props send data from parent to child components.

Use curly braces {} in JSX to show prop values.

Props help reuse components with different content.