In React, when you want to access props inside attribute values, you must use curly braces ({}) to embed JavaScript expressions—including prop values—within JSX.

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

Here, name is a prop, and we access it inside the JSX using {name}.

Accessing props inside attribute values (in quotes)

When setting an attribute using a prop, do not use quotes around the expression. Use this syntax:

<img src={props.imageUrl} alt={props.imageAlt} />

Incorrect usage:

<img src="{props.imageUrl}" />   // ❌ This will literally render the string "{props.imageUrl}"

Correct usage:

<img src={props.imageUrl} />     // ✅ This evaluates the JS expression inside the curly braces

Example with custom attributes:

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

// Usage
<Button label="Submit" type="submit" />