React Basics Practice

Practise JSX, components, props, conditional rendering, lists with keys, events and useState. Each solution runs live so you can compare it with yours.

Beginner6 problemsUpdated October 24, 2026

Review first: JSX, Components, Props, Conditional Rendering, Rendering Lists and Keys, Handling Events, State with useState

1.Profile card with props

Beginner

Write a ProfileCard component that takes name, role and an optional location (default "Remote"), and render two cards: Neha, Designer, Bengaluru; and Arjun, Developer, with no location.

Show hint

Destructure the props with a default value, function ProfileCard({ name, role, location = "Remote" }).

Show solution

JSX

function ProfileCard({ name, role, location = "Remote" }) {
  return (
    <div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 10, marginBottom: 8 }}>
      <strong>{name}</strong>
      <div>{role} · {location}</div>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <ProfileCard name="Neha" role="Designer" location="Bengaluru" />
      <ProfileCard name="Arjun" role="Developer" />
    </div>
  );
}

ResultRendered by your browser

Props arrive as one object; destructuring with = "Remote" supplies the value when the prop is not passed.

2.Grade from marks

Beginner

Write a Grade component that takes marks (0–100) and shows "A" for 90 or more, "B" for 75 or more, "C" for 50 or more, and "Fail" otherwise, in green for passes and red for "Fail". Render it for 95, 80, 62 and 30.

Show hint

Work out the grade with if statements before the return, then choose the colour with a ternary.

Show solution

JSX

function Grade({ marks }) {
  let grade = "Fail";
  if (marks >= 90) grade = "A";
  else if (marks >= 75) grade = "B";
  else if (marks >= 50) grade = "C";
  return (
    <p>
      {marks} marks: <strong style={{ color: grade === "Fail" ? "crimson" : "green" }}>{grade}</strong>
    </p>
  );
}

export default function App() {
  return (
    <div>
      {[95, 80, 62, 30].map((m) => <Grade key={m} marks={m} />)}
    </div>
  );
}

ResultRendered by your browser

Logic that needs statements goes before the return; inside JSX use expressions such as the ternary for the colour.

3.Filtered list with keys

Beginner

Given the cities below, show only those with a population of 10 million or more, largest first, as "City: N million". Use the city name as the key.

JavaScript

const cities = [
  { name: "Mumbai", population: 20.7 },
  { name: "Pune", population: 7.2 },
  { name: "Delhi", population: 33.8 },
  { name: "Kolkata", population: 15.6 },
  { name: "Jaipur", population: 4.3 },
];

Show hint

Chain filter, toSorted and map, giving each <li> a key.

Show solution

JSX

const cities = [
  { name: "Mumbai", population: 20.7 },
  { name: "Pune", population: 7.2 },
  { name: "Delhi", population: 33.8 },
  { name: "Kolkata", population: 15.6 },
  { name: "Jaipur", population: 4.3 },
];

export default function App() {
  const big = cities.filter((c) => c.population >= 10).toSorted((a, b) => b.population - a.population);
  return (
    <ul>
      {big.map((c) => (
        <li key={c.name}>{c.name}: {c.population} million</li>
      ))}
    </ul>
  );
}

ResultRendered by your browser

Prepare the array first (without mutating it), then map it to elements with stable, unique keys. The populations here are sample figures for the exercise.

4.Like button
Beginner
Build a like button that toggles between "♡ Like" and "♥ Liked" and shows the like count, which starts at 41 and goes up by one when liked and back down when unliked.
Show hint
Keep liked in state and calculate the count as 41 + (liked ? 1 : 0) instead of storing it separately.
Show solution
JSX
import { useState } from "react"; export default function App() { const [liked, setLiked] = useState(false); const count = 41 + (liked ? 1 : 0); return ( <button onClick={() => setLiked(!liked)}> {liked ? "♥ Liked" : "♡ Like"} · {count} </button> ); }
ResultRendered by your browser
The count is derived from liked, so the two can never disagree.

5.Counter with a step

Beginner

Build a counter with a number input for the step (default 1) and buttons to add and subtract the step. Use the updater form of the setter.

Show hint

e.target.value is a string: convert it with Number(...). Update with setCount((c) => c + step).

Show solution

JSX

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);
  return (
    <div>
      <label>
        Step: <input type="number" value={step} onChange={(e) => setStep(Number(e.target.value))} style={{ width: 60 }} />
      </label>
      <p>
        <button onClick={() => setCount((c) => c - step)}>−{step}</button> {count}{" "}
        <button onClick={() => setCount((c) => c + step)}>+{step}</button>
      </p>
    </div>
  );
}

ResultRendered by your browser

Inputs always give strings, so convert before doing maths; otherwise 0 + "5" would produce "05".

6.Simple tabs

Beginner

Build three tabs, "Description", "Specifications" and "Reviews". Clicking a tab shows its text below and makes the active tab bold.

Show hint

Store the active tab name in state and look up the text from an object.

Show solution

JSX

import { useState } from "react";

const CONTENT = {
  Description: "A lightweight backpack for daily commutes.",
  Specifications: "25 litres · water resistant · 650 g",
  Reviews: "4.4 out of 5 from 312 reviews",
};

export default function App() {
  const [active, setActive] = useState("Description");
  return (
    <div>
      {Object.keys(CONTENT).map((tab) => (
        <button key={tab} onClick={() => setActive(tab)} style={{ fontWeight: tab === active ? "bold" : "normal", marginRight: 6 }}>
          {tab}
        </button>
      ))}
      <p>{CONTENT[active]}</p>
    </div>
  );
}

ResultRendered by your browser

One piece of state (the active tab) drives both the content and the styling.

← All practice sets Learn React course →