Module 2.3: JSX & Rendering Logic

// This is JSX
const element = <h1>Hello, React!</h1>;

const element = (
  <div className="container">
    <h1>Hello</h1>
    <p>Welcome to React</p>
  </div>
);

const element = React.createElement(
  'div',
  { className: 'container' },
  React.createElement('h1', null, 'Hello'),
  React.createElement('p', null, 'Welcome to React')
);

<label for="email" class="form-label">Email</label>
<input type="email" id="email" class="form-input" tabindex="1" onclick="handleClick()" style="color: red;" />

<label htmlFor="email" className="form-label">Email</label>
<input
  type="email"
  id="email"
  className="form-input"
  tabIndex={1}
  onClick={handleClick}
  style={{ color: 'red' }}
/>

// ❌ HTML style - This will cause errors in JSX
<img src="logo.png" />
<input type="text" />
<br />
 
// ✅ JSX - You must self-close them
<img src="logo.png" />
<input type="text" />
<br />

// HTML: The 'disabled' attribute doesn't need a value
<button disabled>Submit</button>
 
// JSX: You can write it like HTML or be explicit
<button disabled>Submit</button>
<button disabled={true}>Submit</button>
 
// Conditionally disable a button
<button disabled={isLoading}>Submit</button>

// ❌ Error: Adjacent JSX elements must be wrapped
function App() {
  return (
    <h1>Title</h1>
    <p>Content</p>
  );
}
 
// ✅ Wrap them in a single element
function App() {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  );
}

// Method 1: The Fragment component
import { Fragment } from 'react'; // Import Fragment
 
function App() {
  return (
    <Fragment>
      <h1>Title</h1>
      <p>Content</p>
    </Fragment>
  );
}
 
// Method 2: Short syntax (highly recommended)
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Content</p>
    </>
  );
}

import { Fragment } from 'react';
 
function Glossary({ items }) {
  return (
    <dl>
      {items.map((item) => (
        <Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{item.description}</dd>
        </Fragment>
      ))}
    </dl>
  );
}

const name = 'React';
const version = 18;
 
function App() {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Version: {version}</p>
      <p>Sum: {1 + 1}</p>
      <p>Uppercase: {name.toUpperCase()}</p>
      <p>Current year: {new Date().getFullYear()}</p>
    </div>
  );
}

{name}                    // Variables
{1 + 1}                   // Math operations
{isActive ? 'Yes' : 'No'} // Ternary operators
{items.map(...)}          // Method calls on arrays
{formatDate(date)}        // Function calls

// ❌ Errors - Statements are not allowed
if (condition) { ... }
for (let i = 0; ...) { ... }
const x = 5

// ❌ Incorrect - HTML style string
<div style="background-color: red; font-size: 16px">
 
// ✅ Correct - JSX style (object)
<div style={{ backgroundColor: 'red', fontSize: '16px' }}>
 
// ✅ Separated into its own object for clarity
const styles = {
  backgroundColor: 'red',
  fontSize: '16px',
  padding: '1rem',
};
 
<div style={styles}>Content</div>

function Notification({ count }) {
  return (
    <div>
      <h1>Messages</h1>
      {count > 0 && <p>You have {count} unread messages.</p>}
    </div>
  );
}
 
// If count = 5 → Displays: "You have 5 unread messages."
// If count = 0 → Nothing is displayed

function LoginButton({ isLoggedIn }) {
  return <button>{isLoggedIn ? 'Logout' : 'Login'}</button>;
}
 
// If isLoggedIn = true  → Displays: "Logout"
// If isLoggedIn = false → Displays: "Login"

function Dashboard({ user }) {
  return <div>{user ? <UserProfile user={user} /> : <LoginForm />}</div>;
}

function UserProfile({ user }) {
  // Early return if no user is provided
  if (!user) {
    return <p>Please log in.</p>;
  }
 
  // This part only runs if a user object exists
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

const fruits = ['Apple', 'Banana', 'Orange'];
 
function FruitList() {
  return (
    <ul>
      {fruits.map((fruit) => (
        <li>{fruit}</li>
      ))}
    </ul>
  );
}

const fruits = ['Apple', 'Banana', 'Orange'];
 
function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={fruit}>{fruit}</li> // Using the fruit name as a key here
      ))}
    </ul>
  );
}

// Without a key - React doesn't know which element is which
// → It might re-render the entire list (slow)
 
// With a key - React tracks each element by its key
// → It only updates the elements that have actually changed (fast)

// ❌ Bad practice - Using the index as a key
{
  items.map((item, index) => <Item key={index} data={item} />);
}

// ✅ Good - Use a unique ID from your data
const users = [
  { id: 'u1', name: 'Alice' },
  { id: 'u2', name: 'Bob' },
];
 
function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

const products = [
  { id: 1, name: 'Laptop', price: 999 },
  { id: 2, name: 'Phone', price: 699 },
];
 
function ProductList() {
  return (
    <div className="product-grid">
      {products.map((product) => (
        <div key={product.id} className="product-card">
          <h3>{product.name}</h3>
          <p>${product.price}</p>
        </div>
      ))}
    </div>
  );
}