React challenges

Practice problem statements with input format, output format, constraints and solutions.

beginner

React Introduction challenge

Build a small solution that uses React Introduction in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

function LessonList() {
  const topics = ["React Introduction", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core react introduction pattern before polishing the final output.

Solution

function LessonList() {
  const topics = ["React Introduction solution", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

beginner

JSX challenge

Build a small solution that uses JSX in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

function LessonList() {
  const topics = ["JSX", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core jsx pattern before polishing the final output.

Solution

function LessonList() {
  const topics = ["JSX solution", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

beginner

Components challenge

Build a small solution that uses Components in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

function StatCard({ label, value }) {
  return <section><strong>{value}</strong><span>{label}</span></section>;
}

export default function Dashboard() {
  return <StatCard label="Paid orders" value={24} />;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core components pattern before polishing the final output.

Solution

function StatCard({ label, value }) {
  return <section><strong>{value}</strong><span>{label}</span></section>;
}

export default function Dashboard() {
  return <StatCard label="Paid orders" value={24} />;
}

beginner

Props challenge

Build a small solution that uses Props in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

function StatCard({ label, value }) {
  return <section><strong>{value}</strong><span>{label}</span></section>;
}

export default function Dashboard() {
  return <StatCard label="Paid orders" value={24} />;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core props pattern before polishing the final output.

Solution

function StatCard({ label, value }) {
  return <section><strong>{value}</strong><span>{label}</span></section>;
}

export default function Dashboard() {
  return <StatCard label="Paid orders" value={24} />;
}

beginner

State challenge

Build a small solution that uses State in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

import { useState } from "react";

export function SaveButton() {
  const [saved, setSaved] = useState(false);
  return <button onClick={() => setSaved(true)}>{saved ? "Saved" : "Save"}</button>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core state pattern before polishing the final output.

Solution

import { useState } from "react";

export function SaveButton() {
  const [saved, setSaved] = useState(false);
  return <button onClick={() => setSaved(true)}>{saved ? "Saved" : "Save"}</button>;
}

beginner

Events challenge

Build a small solution that uses Events in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

import { useState } from "react";

export function SaveButton() {
  const [saved, setSaved] = useState(false);
  return <button onClick={() => setSaved(true)}>{saved ? "Saved" : "Save"}</button>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core events pattern before polishing the final output.

Solution

import { useState } from "react";

export function SaveButton() {
  const [saved, setSaved] = useState(false);
  return <button onClick={() => setSaved(true)}>{saved ? "Saved" : "Save"}</button>;
}

beginner

Lists challenge

Build a small solution that uses Lists in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

function LessonList() {
  const topics = ["Lists", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core lists pattern before polishing the final output.

Solution

function LessonList() {
  const topics = ["Lists solution", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

beginner

Conditional Rendering challenge

Build a small solution that uses Conditional Rendering in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

function LessonList() {
  const topics = ["Conditional Rendering", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core conditional rendering pattern before polishing the final output.

Solution

function LessonList() {
  const topics = ["Conditional Rendering solution", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

beginner

Forms challenge

Build a small solution that uses Forms in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

function LessonList() {
  const topics = ["Forms", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core forms pattern before polishing the final output.

Solution

function LessonList() {
  const topics = ["Forms solution", "practice", "quiz"];
  return <ul>{topics.map((item) => <li key={item}>{item}</li>)}</ul>;
}

beginner

useEffect challenge

Build a small solution that uses useEffect in React and handles one normal case plus one edge case.

Input format

Use a short text value, array, query, or sample object depending on the topic.

Output format

Print, render, or return the processed result in a readable format.

Constraints

Keep the solution under 60 lines.
Use descriptive names.
Do not depend on hidden external services.

Starter code

import { useEffect, useState } from "react";

export function OrdersPanel() {
  const [orders, setOrders] = useState([]);
  useEffect(() => { fetch("/api/orders").then((res) => res.json()).then(setOrders); }, []);
  return <p>{orders.length} orders loaded</p>;
}

Test cases

basic sample - valid processed result
empty or small sample - safe fallback result

Hint

Focus on the core useeffect pattern before polishing the final output.

Solution

import { useEffect, useState } from "react";

export function OrdersPanel() {
  const [orders, setOrders] = useState([]);
  useEffect(() => { fetch("/api/orders").then((res) => res.json()).then(setOrders); }, []);
  return <p>{orders.length} orders loaded</p>;
}