08_JSX Attributes & Expression - Maniconserve/React-Wiki GitHub Wiki

1. JSX Attributes

Attributes in JSX work like HTML attributes — they pass information to an element. The syntax looks almost the same as HTML, with a few differences.

String Attributes

Pass a plain string using double quotes.

<input type="text" placeholder="Enter your name" />
<img src="logo.png" alt="Company Logo" />
<a href="https://google.com">Visit Google</a>

Dynamic Attributes (using a variable)

Use { } curly braces instead of quotes to pass a JavaScript variable.

const imageUrl = 'profile.png';
const linkUrl = 'https://google.com';

<img src={imageUrl} alt="Profile" />
<a href={linkUrl}>Visit</a>

⚠️ Never mix quotes and curly braces — use one or the other.

// ❌ Wrong
<img src="{imageUrl}" />

// ✅ Correct
<img src={imageUrl} />

Boolean Attributes

If an attribute is true, you can write just the attribute name. If it is false, omit it entirely.

// These two are identical
<input disabled={true} />
<input disabled />

// To disable conditionally
const isDisabled = false;
<input disabled={isDisabled} />

2. JSX Expressions

Curly braces { } let you embed any valid JavaScript expression inside JSX. An expression is anything that produces a value.

Variables

const name = 'Arjun';
const age = 22;

function Profile() {
  return (
    <div>
      <h1>{name}</h1>
      <p>Age: {age}</p>
    </div>
  );
}

Arithmetic

function Cart() {
  const price = 100;
  const qty = 3;

  return (
    <p>Total: ₹{price * qty}</p>  // renders: Total: ₹300
  );
}

Calling a Function

function toUpperCase(text) {
  return text.toUpperCase();
}

function Banner() {
  return <h1>{toUpperCase('hello world')}</h1>;  // renders: HELLO WORLD
}

Ternary Operator (Conditional Rendering)

Use a ternary to show different content based on a condition. if statements do not work inside JSX directly — use ternary instead.

const isLoggedIn = true;

function Header() {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

Short-Circuit && (Render or Nothing)

If you want to show something only when a condition is true, and show nothing otherwise, use &&.

const hasNotification = true;

function Navbar() {
  return (
    <div>
      <h1>My App</h1>
      {hasNotification && <span>🔔 You have new alerts</span>}
    </div>
  );
}

If hasNotification is false, nothing is rendered in that spot.

Template Literals

const city = 'Hyderabad';

function Footer() {
  return <p>{`You are browsing from ${city}`}</p>;
}

Expressions Inside Attributes

You can use any expression inside an attribute too, not just variables.

const size = 200;
const isActive = true;

<img width={size * 2} />
<button className={isActive ? 'btn-active' : 'btn-inactive'}>Click</button>

3. What You CANNOT Put in { }

Not everything is a valid expression. These will not work inside JSX curly braces:

❌ Does not work ✅ Use instead
if / else statement Ternary condition ? a : b
for loop .map() on an array
Variable declarations (const, let) Declare outside JSX, reference inside 
// ❌ Wrong — if statement inside JSX
function App() {
  return (
    <div>
      {if (isLoggedIn) { <p>Welcome</p> }}
    </div>
  );
}

// ✅ Correct — ternary inside JSX
function App() {
  return (
    <div>
      {isLoggedIn ? <p>Welcome</p> : <p>Please log in</p>}
    </div>
  );
}

4. Rendering Lists with .map()

To render an array of items, use .map() to convert each item into JSX. Each item must have a unique key attribute so React can track them efficiently.

const fruits = ['Apple', 'Banana', 'Mango'];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Renders:

• Apple
• Banana
• Mango

key must be unique among siblings. Using a stable ID from your data is better than index when the list can be reordered.

Quick Reference

Use Case Syntax
String attribute <input type="text" />
Dynamic attribute <img src={url} />
Boolean attribute <input disabled />
Variable in JSX <p>{name}</p>
Expression / arithmetic <p>{price * qty}</p>
Function call <p>{formatDate(date)}</p>
Conditional (ternary) {isOn ? <A /> : <B />}
Render or nothing {flag && <Component />}
Render a list {items.map(i => <li key={i.id}>{i.name}</li>)}
⚠️ **GitHub.com Fallback** ⚠️