Practice: Core Concepts

Let's think about this for a second

This lesson isn't new teaching content — it's meant to let you re-apply the component, props, state, event handling, and conditional rendering concepts from the Basic chapter through hands-on practice tasks. Each task tests one concept in short form and encourages you to write the solution yourself. You'll get to double-check how to build a reusable component, how to pass props, and how to connect an event handler to a state update. There isn't just one correct solution — feel free to write it your own way.

Practice Exercises

Task 1: Build a Counter component — store count with useState, and increase/decrease it when the "+" and "-" buttons are clicked. Task 2: Build a Greeting component — accept a name prop and use conditional rendering to display "Hello, {name}!" when a name is given, or "Hello, Guest!" when it isn't. Task 3: Build a ColorPicker component — clicking the red/green/blue buttons should change a div's background color via a state update.

Wrote the increment/decrement counter logic with useState yourself
Used conditional rendering (&&, ternary) based on whether a props value exists
Saw a button click event trigger a state update and the UI change instantly

Code Example

javascript

// Task 1 starter - Counter.jsx
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  // TODO: add increment and decrement handlers here

  return (
    <div>
      <button>-</button>
      <span>{count}</span>
      <button>+</button>
    </div>
  );
}

export default Counter;

// Task 2 starter - Greeting.jsx
function Greeting({ name }) {
  // TODO: conditional rendering - "Hello, {name}!" or "Hello, Guest!"
  return <h3></h3>;
}

export default Greeting;

// Task 3 starter - ColorPicker.jsx
import { useState } from "react";

function ColorPicker() {
  const [color, setColor] = useState("lightgray");

  // TODO: three buttons that call setColor("red") / ("green") / ("blue")

  return <div style={{ background: color, height: 100 }}></div>;
}

export default ColorPicker;

You should see

Once all three tasks are done, the counter, greeting message, and color box will each update on screen instantly based on user interaction.

Try it in 5 minutes

Once you've finished Task 1, try adding logic so the "-" button gets disabled when the count value drops below 0 — try it within 5 minutes.

A quick word of caution

Don't forget to wrap it in an arrow function like onClick={() => setCount(count + 1)} — calling the function directly would execute it immediately on every render.