React js Dashboard Practice Questions with Solutions

Introduction

A React Dashboard is a user interface that displays important information, statistics, navigation options, and other application features in one place. Dashboards are commonly used in admin panels, learning platforms, business applications, and management systems. In this chapter, we will practice building dashboard layouts using reusable React components, state, props, dynamic data, and API-based information. React js Dashboard practice questions with solutions to help you understand the concepts.

1. What is a React Dashboard?

Problem Statement:
Create a simple React dashboard that displays a welcome message and three basic statistics.

React Solution:

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Welcome to your dashboard!</p>

      <div>
        <h3>Total Students</h3>
        <p>250</p>
      </div>

      <div>
        <h3>Total Courses</h3>
        <p>15</p>
      </div>

      <div>
        <h3>Total Teachers</h3>
        <p>20</p>
      </div>
    </div>
  );
}

export default Dashboard;

Output:

Dashboard
Welcome to your dashboard!

Total Students
250

Total Courses
15

Total Teachers
20

Explanation:
The Dashboard component displays a heading, welcome message, and three statistics. This is the basic structure of a dashboard.

Concepts Covered:

• Function Components
• JSX
• Basic Dashboard Structure

2. How to Create a Dashboard Layout with Components?

Problem Statement:
Create separate components for the sidebar, header, and main dashboard content.

React Solution:

function Sidebar() {
  return (
    <aside>
      <h2>My App</h2>
      <p>Dashboard</p>
      <p>Users</p>
      <p>Settings</p>
    </aside>
  );
}

function Header() {
  return (
    <header>
      <h1>Dashboard</h1>
    </header>
  );
}

function MainContent() {
  return (
    <main>
      <h2>Welcome!</h2>
      <p>This is the main dashboard area.</p>
    </main>
  );
}

function Dashboard() {
  return (
    <div>
      <Sidebar />
      <Header />
      <MainContent />
    </div>
  );
}

export default Dashboard;

Output:

My App
Dashboard
Users
Settings

Dashboard

Welcome!
This is the main dashboard area.

Explanation:
Instead of putting everything inside one large component, the dashboard is divided into smaller reusable components. This makes the application easier to maintain.

Concepts Covered:

• Component Composition
• Reusable Components
• Dashboard Layout

3. How to Create Reusable Dashboard Statistic Cards?

Problem Statement:
Create a reusable StatCard component that accepts a title and value through props.

React Solution:

function StatCard({ title, value }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{value}</p>
    </div>
  );
}

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      <StatCard title="Students" value="250" />
      <StatCard title="Courses" value="15" />
      <StatCard title="Teachers" value="20" />
    </div>
  );
}

export default Dashboard;

Output:

Dashboard

Students
250

Courses
15

Teachers
20

Explanation:
StatCard is reusable because the same component can display different information using props. This avoids writing the same JSX multiple times.

Concepts Covered:

• Props
• Reusable Components
• Component Composition

4. How to Display Dynamic Dashboard Statistics?

Problem Statement:
Store dashboard statistics in an array and render the cards dynamically using map().

React Solution:

function StatCard({ title, value }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{value}</p>
    </div>
  );
}

function Dashboard() {
  const stats = [
    { id: 1, title: "Students", value: 250 },
    { id: 2, title: "Courses", value: 15 },
    { id: 3, title: "Teachers", value: 20 },
    { id: 4, title: "Projects", value: 45 }
  ];

  return (
    <div>
      <h1>Dashboard</h1>

      {stats.map((stat) => (
        <StatCard
          key={stat.id}
          title={stat.title}
          value={stat.value}
        />
      ))}
    </div>
  );
}

export default Dashboard;

Output:

Dashboard

Students
250

Courses
15

Teachers
20

Projects
45

Explanation:
The statistics are stored as objects inside an array. map() creates one StatCard for every object. A stable unique id is used as the list key.

Concepts Covered:

• Arrays
• map()
• Props
• List Keys
• Dynamic Rendering

5. How to Add a Sidebar Navigation to a React Dashboard?

Problem Statement:
Create a dashboard sidebar containing navigation links.

React Solution:

function Sidebar() {
  return (
    <nav>
      <h2>Admin Panel</h2>

      <ul>
        <li>Dashboard</li>
        <li>Students</li>
        <li>Courses</li>
        <li>Reports</li>
        <li>Settings</li>
      </ul>
    </nav>
  );
}

function Dashboard() {
  return (
    <div>
      <Sidebar />

      <main>
        <h1>Dashboard</h1>
        <p>Welcome to the admin panel.</p>
      </main>
    </div>
  );
}

export default Dashboard;

Output:

Admin Panel

Dashboard
Students
Courses
Reports
Settings

Dashboard
Welcome to the admin panel.

Explanation:
The sidebar is separated into its own component. In a real application, these items can be converted into React Router links for navigation between pages.

Concepts Covered:

• Navigation
• Components
• Dashboard Structure
• React Router Integration

6. How to Create a Dashboard Header with User Information?

Problem Statement:
Create a reusable dashboard header that displays the logged-in user’s name.

React Solution:

function Header({ userName }) {
  return (
    <header>
      <h1>Dashboard</h1>
      <p>Welcome, {userName}</p>
    </header>
  );
}

function Dashboard() {
  return (
    <div>
      <Header userName="Rahul" />

      <main>
        <h2>Dashboard Overview</h2>
      </main>
    </div>
  );
}

export default Dashboard;

Output:

Dashboard
Welcome, Rahul

Dashboard Overview

Explanation:
The user’s name is passed to the Header component through props. This makes the header reusable for different users.

Concepts Covered:

• Props
• Reusable Components
• Dynamic Content

7. How to Display Dashboard Data from State?

Problem Statement:
Use useState to store a dashboard statistic and provide a button to increase the number.

React Solution:

import { useState } from "react";

function Dashboard() {
  const [students, setStudents] = useState(250);

  function addStudent() {
    setStudents((currentStudents) => currentStudents + 1);
  }

  return (
    <div>
      <h1>Dashboard</h1>

      <h3>Total Students</h3>
      <p>{students}</p>

      <button onClick={addStudent}>
        Add Student
      </button>
    </div>
  );
}

export default Dashboard;

Output:

Dashboard

Total Students
250

[Add Student]

After clicking the button:

Total Students
251

Explanation:
The student count is stored in React state. When setStudents() updates the state, React can render the component again with the new value.

Concepts Covered:

• useState
• Event Handling
• State Updates
• Dynamic Dashboard Data

8. How to Fetch Dashboard Data from an API?

Problem Statement:
Fetch dashboard statistics from an API and display loading, error, and successful data states.

React Solution:

import { useEffect, useState } from "react";

function Dashboard() {
  const [stats, setStats] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    async function fetchStats() {
      try {
        const response = await fetch(
          "https://example.com/api/dashboard"
        );

        if (!response.ok) {
          throw new Error("Failed to fetch dashboard data");
        }

        const data = await response.json();
        setStats(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    }

    fetchStats();
  }, []);

  if (loading) {
    return <p>Loading dashboard...</p>;
  }

  if (error) {
    return <p>{error}</p>;
  }

  return (
    <div>
      <h1>Dashboard</h1>

      <p>Students: {stats.students}</p>
      <p>Courses: {stats.courses}</p>
      <p>Revenue: ₹{stats.revenue}</p>
    </div>
  );
}

export default Dashboard;

Output:

Loading dashboard...

After successful API response:

Dashboard

Students: 250
Courses: 15
Revenue: ₹50000

Explanation:
The dashboard gets its data from an API using fetch(). useEffect starts the request after the component is committed. The component manages loading, error, and successful data states separately.

In a real application, the API URL should point to your backend or API service. fetch() does not automatically reject for HTTP errors such as 404 or 500, so checking response.ok is important.

Concepts Covered:

• useEffect
• useState
• API Integration
• fetch()
• Loading State
• Error Handling

9. How to Create a Responsive Basic Dashboard Layout?

Problem Statement:
Create a dashboard layout with a sidebar and main content area using CSS Grid.

React Solution:

function Dashboard() {
  return (
    <div className="dashboard">
      <aside className="sidebar">
        <h2>Admin Panel</h2>
        <p>Dashboard</p>
        <p>Students</p>
        <p>Courses</p>
        <p>Settings</p>
      </aside>

      <main className="main-content">
        <h1>Dashboard</h1>

        <div className="cards">
          <div className="card">Students: 250</div>
          <div className="card">Courses: 15</div>
          <div className="card">Teachers: 20</div>
        </div>
      </main>
    </div>
  );
}

export default Dashboard;

CSS:

.dashboard {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.sidebar {
  padding: 20px;
}

.main-content {
  padding: 20px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
  }

  .cards {
    grid-template-columns: 1fr;
  }
}

Output:

Desktop layout:

-----------------------------------------
| Sidebar | Main Dashboard              |
|          |                             |
|          | [Students] [Courses] [Users]|
-----------------------------------------

On smaller screens, the layout changes to a single-column structure.

Explanation:
CSS Grid creates the main dashboard structure. The media query changes the layout for smaller screens. React handles the UI structure, while CSS is responsible for the visual responsive layout.

Concepts Covered:

• CSS Grid
• Responsive Design
• Media Queries
• React Components

10. How to Build a Complete React Dashboard?

Problem Statement:
Create a practical dashboard using a sidebar, header, reusable statistic cards, and dynamic dashboard data.

React Solution:

import { useState } from "react";

function Sidebar() {
  return (
    <aside>
      <h2>Admin Panel</h2>

      <nav>
        <p>Dashboard</p>
        <p>Students</p>
        <p>Courses</p>
        <p>Reports</p>
        <p>Settings</p>
      </nav>
    </aside>
  );
}

function Header({ userName }) {
  return (
    <header>
      <h1>Dashboard</h1>
      <p>Welcome, {userName}</p>
    </header>
  );
}

function StatCard({ title, value }) {
  return (
    <div>
      <h3>{title}</h3>
      <p>{value}</p>
    </div>
  );
}

function Dashboard() {
  const [stats, setStats] = useState([
    { id: 1, title: "Students", value: 250 },
    { id: 2, title: "Courses", value: 15 },
    { id: 3, title: "Teachers", value: 20 },
    { id: 4, title: "Projects", value: 45 }
  ]);

  function addStudent() {
    setStats((currentStats) =>
      currentStats.map((stat) =>
        stat.title === "Students"
          ? { ...stat, value: stat.value + 1 }
          : stat
      )
    );
  }

  return (
    <div className="dashboard">
      <Sidebar />

      <main>
        <Header userName="Rahul" />

        <section>
          <h2>Overview</h2>

          <div>
            {stats.map((stat) => (
              <StatCard
                key={stat.id}
                title={stat.title}
                value={stat.value}
              />
            ))}
          </div>

          <button onClick={addStudent}>
            Add Student
          </button>
        </section>
      </main>
    </div>
  );
}

export default Dashboard;

Output:

Admin Panel

Dashboard
Students
Courses
Reports
Settings

Dashboard
Welcome, Rahul

Overview

Students
250

Courses
15

Teachers
20

Projects
45

[Add Student]

After clicking Add Student:

Students
251

Explanation:
This example combines several React concepts into one practical dashboard.

The Sidebar handles navigation, Header displays user information, and StatCard is a reusable component for statistics. Dashboard data is stored in state and rendered using map().

The addStudent() function updates only the student object without directly mutating the existing state array. This makes the example a good practice for building real-world dashboard interfaces.

A production dashboard can extend this structure with React Router, authentication, API data, charts, tables, permissions, loading states, error boundaries, and responsive styling.

Concepts Covered:

• useState
• Props
• Reusable Components
• map()
• Immutable State Updates
• Event Handling
• Component Composition
• Dashboard Architecture

Key Takeaways

• A React Dashboard combines multiple reusable components into one application interface.
• Common dashboard components include Sidebar, Header, Cards, Tables, Charts, and Main Content.
• Props can be used to make dashboard components reusable.
• map() is useful for rendering dynamic statistics and other dashboard lists.
• Stable unique keys should be used when rendering lists.
• useState can manage interactive dashboard data.
• useEffect can be used when synchronizing dashboard data with an API or another external system.
• Loading, error, success, and empty states should be handled when working with remote data.
• React manages the UI and state, while CSS handles layout and responsive design.
• A real dashboard can combine routing, authentication, API integration, reusable components, and responsive layouts.

FAQs

1. What is a React Dashboard?

A React Dashboard is an interface that displays important application information, statistics, navigation, and actions in one place using React components.

2. How do I create a Dashboard in React?

You can create a dashboard by dividing the interface into reusable components such as Sidebar, Header, StatCard, and MainContent, and then combining them in a parent component.

3. Can I use API data in a React Dashboard?

Yes. You can use fetch() or another HTTP client to retrieve data from an API and display it in dashboard components.

4. Which React Hooks are commonly used in dashboards?

useState and useEffect are commonly used. useState manages interactive state, while useEffect is useful for synchronizing with external systems such as APIs.

5. How can I make a React Dashboard responsive?

React can provide the component structure, while CSS Grid, Flexbox, and media queries can be used to create responsive dashboard layouts.

6. Should dashboard cards be separate React components?

Yes. Creating reusable components such as StatCard makes the dashboard easier to maintain and allows the same design to display different data.

7. Can React be used to build an admin dashboard?

Yes. React is commonly used to build admin dashboards with navigation, statistics, tables, forms, API integration, authentication, and other interactive features.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar