Learning Objectives

By the end of this lesson, you should be comfortable with:

Components and JSX
Props and State
Hooks (useState, useEffect, useRef)
Event handling
Conditional rendering and lists
Component composition patterns

Prerequisites

Basic React knowledge assumed. For a complete introduction, see:

1. Components and JSX

React components are the building blocks of your user interface. They are JavaScript functions that return JSX (JavaScript XML), which looks like HTML but allows you to embed JavaScript expressions.

Function Components

Function components are the modern way to write React components. They are simply JavaScript functions that accept props and return JSX elements. Below are three equivalent ways to define a simple component, ranging from a traditional function declaration to a concise arrow function with implicit return.

// Basic component
function Welcome() {
  return <h1>Welcome to RizPay</h1>;
}

// Arrow function component (preferred in modern React)
const Welcome = () => {
  return <h1>Welcome to RizPay</h1>;
};

// With implicit return
const Welcome = () => <h1>Welcome to RizPay</h1>;

JSX Rules

JSX has specific syntax rules that differ from regular HTML. You must have a single parent element wrapping your JSX, use className instead of class for CSS classes, and write JavaScript expressions inside curly braces. Self-closing tags require the closing slash, and inline styles are written as JavaScript objects.

const Card = () => {
  const title = "Transaction";
  const amount = 5000;

  return (
    // 1. Must have single parent element
    <div className="card">
      {/* 2. Use className instead of class */}
      <h2>{title}</h2>

      {/* 3. JavaScript expressions in curly braces */}
      <p>Amount: ₦{amount.toLocaleString()}</p>

      {/* 4. Self-closing tags must end with /> */}
      <input type="text" />
      <img src="/logo.png" alt="Logo" />

      {/* 5. Style as object */}
      <div style={{ backgroundColor: "blue", padding: "1rem" }}>
        Styled content
      </div>
    </div>
  );
};

Fragments

Fragments allow you to group multiple elements without adding extra DOM nodes. The short syntax uses empty angle brackets, while React.Fragment can accept a key prop when mapping over lists.

// When you don't want extra DOM elements
const UserInfo = () => {
  return (
    <>
      <h1>John Doe</h1>
      <p>john@example.com</p>
    </>
  );
};

// Or with React.Fragment (allows keys)
import { Fragment } from "react";

const List = ({ items }) => (
  <>
    {items.map((item) => (
      <Fragment key={item.id}>
        <dt>{item.term}</dt>
        <dd>{item.description}</dd>
      </Fragment>
    ))}
  </>
);

2. Props

Props (short for properties) are how you pass data from parent components to child components. They make your components reusable and dynamic by allowing different values to be passed each time a component is used.

Passing Props

Props are passed to components like HTML attributes. The child component receives these props as an object parameter. Using destructuring in the function parameters makes the code cleaner and more readable.

// Parent component
const App = () => {
  return (
    <TransactionCard
      type="airtime"
      amount={500}
      status="completed"
      onRetry={() => console.log("Retrying...")}
    />
  );
};

// Child component receiving props
const TransactionCard = (props) => {
  return (
    <div>
      <h3>{props.type}</h3>
      <p>₦{props.amount}</p>
      <span>{props.status}</span>
      <button onClick={props.onRetry}>Retry</button>
    </div>
  );
};

// With destructuring (preferred)
const TransactionCard = ({ type, amount, status, onRetry }) => {
  return (
    <div>
      <h3>{type}</h3>
      <p>₦{amount}</p>
      <span>{status}</span>
      <button onClick={onRetry}>Retry</button>
    </div>
  );
};

Default Props

Default props provide fallback values when a prop is not passed. You can set defaults directly in the destructuring pattern, making your components more robust and easier to use without requiring all props every time.

const Button = ({
  children,
  variant = 'primary',  // Default value
  size = 'medium',
  disabled = false
}) => {
  return (
    <button
      className={`btn btn-${variant} btn-${size}`}
      disabled={disabled}
    >
      {children}
    </button>
  );
};

// Usage
<Button>Click Me</Button>  // Uses defaults
<Button variant="secondary" size="large">Large Button</Button>

Children Prop

The special children prop represents any content placed between a component's opening and closing tags. This pattern is commonly used for wrapper components like cards, modals, and layouts.

// Card wrapper component
const Card = ({ children, title }) => {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-content">{children}</div>
    </div>
  );
};

// Usage
<Card title="My Wallet">
  <p>Balance: ₦50,000</p>
  <button>Add Funds</button>
</Card>;

3. State with useState

State allows components to remember and update values over time. Unlike props, state is managed within a component and can change in response to user actions or other events, causing the component to re-render with the new values.

Basic State

The useState hook returns an array with two elements: the current state value and a function to update it. We use array destructuring to assign them to descriptive variable names. When the setter function is called, React re-renders the component with the new value.

import { useState } from "react";

const Counter = () => {
  // [currentValue, setterFunction] = useState(initialValue)
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
};

State with Objects

When state is an object, you must create a new object when updating to trigger a re-render. The spread operator copies existing properties, and computed property names allow you to update specific fields dynamically.

const UserForm = () => {
  const [user, setUser] = useState({
    name: "",
    email: "",
    phone: "",
  });

  // Always create new object when updating
  const handleChange = (e) => {
    const { name, value } = e.target;
    setUser((prev) => ({
      ...prev, // Spread previous values
      [name]: value, // Update specific field
    }));
  };

  return (
    <form>
      <input name="name" value={user.name} onChange={handleChange} />
      <input name="email" value={user.email} onChange={handleChange} />
    </form>
  );
};

State with Arrays

Working with arrays in state requires creating new arrays rather than mutating the existing one. Common operations include spreading to add items, filtering to remove items, and mapping to update specific items.

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [input, setInput] = useState("");

  // Add item
  const addTodo = () => {
    setTodos([...todos, { id: Date.now(), text: input }]);
    setInput("");
  };

  // Remove item
  const removeTodo = (id) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  // Update item
  const toggleTodo = (id) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, done: !todo.done } : todo
      )
    );
  };

  return (
    <div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{ textDecoration: todo.done ? "line-through" : "none" }}
            >
              {todo.text}
            </span>
            <button onClick={() => toggleTodo(todo.id)}>Toggle</button>
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

4. Side Effects with useEffect

Side effects are operations that interact with the outside world, such as fetching data, setting up subscriptions, or directly manipulating the DOM. The useEffect hook lets you perform these operations after React has updated the DOM.

Basic useEffect

The useEffect hook accepts a callback function and an optional dependency array. The dependency array controls when the effect runs: omitting it runs on every render, an empty array runs only once on mount, and including values runs whenever those values change.

import { useState, useEffect } from "react";

const UserProfile = ({ userId }) => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  // Runs after every render
  useEffect(() => {
    console.log("Component rendered");
  });

  // Runs once on mount (empty dependency array)
  useEffect(() => {
    console.log("Component mounted");
  }, []);

  // Runs when userId changes
  useEffect(() => {
    const fetchUser = async () => {
      setLoading(true);
      const response = await fetch(`/api/users/${userId}`);
      const data = await response.json();
      setUser(data);
      setLoading(false);
    };

    fetchUser();
  }, [userId]); // Dependency array

  if (loading) return <p>Loading...</p>;
  if (!user) return <p>User not found</p>;

  return <div>{user.name}</div>;
};

Cleanup Function

The cleanup function returned from useEffect runs before the component unmounts or before the effect runs again. This is essential for preventing memory leaks by clearing timers, canceling subscriptions, or removing event listeners.

const Timer = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // Start timer
    const interval = setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);

    // Cleanup function - runs on unmount or before re-running effect
    return () => {
      clearInterval(interval);
    };
  }, []);

  return <p>Seconds: {seconds}</p>;
};

5. Event Handling

React handles events using camelCase naming (onClick instead of onclick) and passes functions as event handlers rather than strings. Event handlers can access the event object to get information like the target element's value.

const Form = () => {
  const [email, setEmail] = useState("");

  // Basic event handler
  const handleClick = () => {
    console.log("Button clicked");
  };

  // Event handler with event object
  const handleChange = (event) => {
    setEmail(event.target.value);
  };

  // Event handler with parameter
  const handleSelect = (optionId) => {
    console.log("Selected:", optionId);
  };

  // Form submission
  const handleSubmit = (event) => {
    event.preventDefault(); // Prevent page reload
    console.log("Form submitted with:", email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={handleChange}
        onFocus={() => console.log("Input focused")}
        onBlur={() => console.log("Input blurred")}
      />

      <button type="button" onClick={handleClick}>
        Click Me
      </button>

      {/* Passing parameters - use arrow function */}
      <button type="button" onClick={() => handleSelect(1)}>
        Option 1
      </button>

      <button type="submit">Submit</button>
    </form>
  );
};

6. Conditional Rendering

React lets you conditionally render content using JavaScript operators. Early returns handle loading and error states, ternary operators handle if-else conditions, and the logical AND operator shows content only when a condition is true.

const Dashboard = ({ user, isLoading, error }) => {
  // Early returns
  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!user) {
    return <div>Please log in</div>;
  }

  return (
    <div>
      {/* Ternary for if-else */}
      <h1>{user.isAdmin ? "Admin Dashboard" : "User Dashboard"}</h1>

      {/* && for conditional display */}
      {user.hasNotifications && <div className="notification-badge">New!</div>}

      {/* Multiple conditions */}
      {user.role === "admin" && <AdminPanel />}
      {user.role === "user" && <UserPanel />}
      {user.role === "guest" && <GuestPanel />}

      {/* Conditional class */}
      <div className={`status ${user.isOnline ? "online" : "offline"}`}>
        {user.name}
      </div>
    </div>
  );
};

7. Rendering Lists

When rendering arrays of data, use the map method to transform each item into a JSX element. Each item must have a unique key prop to help React efficiently update the list when items change.

const TransactionList = ({ transactions }) => {
  if (transactions.length === 0) {
    return <p>No transactions found</p>;
  }

  return (
    <ul className="transaction-list">
      {transactions.map((tx) => (
        // Key must be unique and stable
        <li key={tx.id} className="transaction-item">
          <span>{tx.type}</span>
          <span>₦{tx.amount.toLocaleString()}</span>
          <span className={`status-${tx.status}`}>{tx.status}</span>
        </li>
      ))}
    </ul>
  );
};

// With index as key (only if no unique id available)
const SimpleList = ({ items }) => (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

8. useRef Hook

The useRef hook creates a mutable reference that persists across re-renders. It is commonly used to access DOM elements directly or to store values that should not trigger re-renders when changed.

import { useRef, useEffect } from "react";

const InputWithFocus = () => {
  // Reference to DOM element
  const inputRef = useRef(null);

  // Focus on mount
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  const handleClick = () => {
    inputRef.current.focus();
    inputRef.current.select();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

// useRef for mutable values (doesn't trigger re-render)
const Timer = () => {
  const [count, setCount] = useState(0);
  const intervalRef = useRef(null);

  const start = () => {
    intervalRef.current = setInterval(() => {
      setCount((c) => c + 1);
    }, 1000);
  };

  const stop = () => {
    clearInterval(intervalRef.current);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
};

9. Component Composition Patterns

Component composition is about combining smaller, focused components to build complex UIs. These patterns help separate concerns, improve reusability, and make your codebase easier to maintain.

Container/Presentational Pattern

This pattern separates data fetching logic from presentation. Container components handle state and data fetching, while presentational components focus solely on rendering UI based on the props they receive.

// Container (handles logic)
const TransactionListContainer = () => {
  const [transactions, setTransactions] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/transactions")
      .then((res) => res.json())
      .then((data) => {
        setTransactions(data);
        setLoading(false);
      });
  }, []);

  return <TransactionList transactions={transactions} loading={loading} />;
};

// Presentational (handles display)
const TransactionList = ({ transactions, loading }) => {
  if (loading) return <Spinner />;

  return (
    <ul>
      {transactions.map((tx) => (
        <TransactionItem key={tx.id} {...tx} />
      ))}
    </ul>
  );
};

Compound Components

Compound components are a pattern where a parent component shares state with its children implicitly. This allows for flexible, expressive APIs where child components work together as a cohesive unit.

const Card = ({ children }) => <div className="card">{children}</div>;

Card.Header = ({ children }) => <div className="card-header">{children}</div>;

Card.Body = ({ children }) => <div className="card-body">{children}</div>;

Card.Footer = ({ children }) => <div className="card-footer">{children}</div>;

// Usage
const App = () => (
  <Card>
    <Card.Header>Transaction Details</Card.Header>
    <Card.Body>
      <p>Amount: ₦5,000</p>
    </Card.Body>
    <Card.Footer>
      <button>View More</button>
    </Card.Footer>
  </Card>
);

Additional Resources

Next Lesson: TypeScript Essentials