Basic Props in React

From the React Components & JSX cheat sheet · Component Essentials · verified Jul 2026

Basic Props

Pass data to components via props

javascript
// Component with props
function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Age: {age}</p>
    </div>
  )
}

// Using with props
function App() {
  return (
    <div>
      <Greeting name="Alice" age={25} />
      <Greeting name="Bob" age={30} />
    </div>
  )
}
🟢 Essential - Props make components reusable
💡 Props are read-only, never modify them
📌 Pass any JavaScript value as a prop
propsessential

More React tasks

Back to the full React Components & JSX cheat sheet