DEV Community

Cover image for Passing Props in React — Minimal Guide
Vijay Kumar
Vijay Kumar

Posted on

Passing Props in React — Minimal Guide

#react #javascript #webdev #programming

In React, props (short for "properties") let you pass data from a parent component to a child component. They help make components reusable and dynamic.

1. Basic Prop Passing

Example 

function Greeting(props) { return <h1>Hello, {props.name}!</h1>; } function App() { return <Greeting name="Agent 101" />; }
Enter fullscreen mode Exit fullscreen mode
  • App passes the prop name to Greeting.
  • Greeting accesses it via props.name.

2. Destructuring Props

Cleaner Syntax 

function Greeting({ name }) { return <h1>Hello, {name}!</h1>; }
Enter fullscreen mode Exit fullscreen mode
  • Same result, but cleaner code.

3. Multiple Props 

function Profile({ name, role }) { return <p>{name} is a {role}</p>; } function App() { return <Profile name="Agent 101" role="CIA" />; }
Enter fullscreen mode Exit fullscreen mode

4. Passing Functions as Props 

function Button({ onClick }) { return <button onClick={onClick}>Click me</button>; } function App() { const handleClick = () => alert('Clicked!'); return <Button onClick={handleClick} />; }
Enter fullscreen mode Exit fullscreen mode
  • Useful for child-to-parent communication.

5. Passing Children 

function Card({ children }) { return <div className="card">{children}</div>; } function App() { return ( <Card> <p>This is inside the card.</p> </Card> ); }
Enter fullscreen mode Exit fullscreen mode
  • children is a special prop for nested JSX.

Summary

  • Pass data using attributes: <Component propName="value" />
  • Access with props.propName or destructuring
  • Props keep components flexible and reusable

Top comments (0)