React Props

Here are the basic examples of props

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

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

Passing Multiple Props

function Greeting({ name, age }) {
  return (
    <p>
      Hi, my name is {name} and I am {age} years old.
    </p>
  );
}

export default function App() {
  return (
    <div>
      <Greeting name="Alice" age={25} />
      <Greeting name="Bob" age={30} />
    </div>
  );
}

Passing Numbers & Expressions

function MathResult({ number }) {
  return <p>{number} squared is {number * number}</p>;
}

export default function App() {
  return (
    <div>
      <MathResult number={5} />
      <MathResult number={10} />
    </div>
  );
}

Passing an Array

function List({ items }) {
  return (
    <ul>
      {items.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
  );
}

export default function App() {
  return (
    <div>
      <List items={["Apples", "Bananas", "Cherries"]} />
    </div>
  );
}

Passing an Object

function UserCard({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Age: {user.age}</p>
      <p>City: {user.city}</p>
    </div>
  );
}

export default function App() {
  const userInfo = { name: "Alice", age: 25, city: "Paris" };

  return (
    <div>
      <UserCard user={userInfo} />
    </div>
  );
}

Passing Functions as Props

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

export default function App() {
  function sayHello() {
    alert("Hello!");
  }

  return (
    <div>
      <Button onClick={sayHello} label="Click Me" />
    </div>
  );
}