Top 30 React Practice Exercises for Beginners with Solutions

21. Write a React component that displays the name of a selected option from a hardcoded dropdown menu.

Required Input:

Options: ['React', 'Angular', 'Vue']

Expected Output:

Initially: Selected: React
 After selection: Selected: [chosen option]

Code In React

import React, { useState } from "react";
 
 const Dropdown = () => {
  const [selected, setSelected] = useState("React");
 
  return (
  <div>
  <select onChange={(e) => {
  // Update the selected value
  }}>
  <option>React</option>
  <option>Angular</option>
  <option>Vue</option>
  </select>
  <p>Selected: {selected}</p>
  </div>
  );
 };
 
 export default Dropdown;

Open Sandbox

Need help ?

Click on Hint to solve the question.

22. Create a component that fetches and displays hardcoded data from a mock API.

Required Input:

Hardcoded mock data:
 { 'id': 1, 'title': 'Learn React', 'completed': true }

Expected Output:

Task: Learn React, Completed: Yes

Code In React

import React, { useState, useEffect } from "react";
 
 const FetchData = () => {
  const [data, setData] = useState(null);
 
  useEffect(() => {
  // Simulate fetching data
  const mockData = { id: 1, title: "Learn React", completed: true };
  setData(mockData);
  }, []);
 
  return (
  <div>
  {/* Render the task details */}
  </div>
  );
 };
 
 export default FetchData;

Open Sandbox

Need help ?

Click on Hint to solve the question.

23. Build a component that displays a loading message for 3 seconds before showing the content.

Expected Output:

Initially: Loading...
 After 3 seconds: Content loaded!

Code In React

import React, { useState, useEffect } from "react";
 
 const Loader = () => {
  const [isLoading, setIsLoading] = useState(true);
 
  useEffect(() => {
  // Set a timeout to change loading state
  }, []);
 
  return <div>{isLoading ? "Loading..." : "Content loaded!"}</div>;
 };
 
 export default Loader;

Open Sandbox

Need help ?

Click on Hint to solve the question.

24. Write a React component that changes its content based on the value of a hardcoded text input field.

Required Input:

Initial input value: 'Hello'

Expected Output:

The <p> tag updates dynamically as the user types.

Code In React

import React, { useState } from "react";
 
 const DynamicText = () => {
  const [text, setText] = useState("Hello");
 
  return (
  <div>
  <input
  type="text"
  value={text}
  onChange={(e) => {
  // Update the state with the input value
  }}
  />
  <p>{text}</p>
  </div>
  );
 };
 
 export default DynamicText;

Open Sandbox

Need help ?

Click on Hint to solve the question.

25. Create a React component that displays 'Welcome!' for 5 seconds and then changes to 'Goodbye!'.

Expected Output:

Initially: Welcome!
 After 5 seconds: Goodbye!

Code In React

import React, { useState, useEffect } from "react";
 
 const TimedMessage = () => {
  const [message, setMessage] = useState("Welcome!");
 
  useEffect(() => {
  // Change the message after 5 seconds
  }, []);
 
  return <div>{message}</div>;
 };
 
 export default TimedMessage;

Open Sandbox

Need help ?

Click on Hint to solve the question.

26. Build a React component that increments or decrements a number using '+' and '-' buttons.

Expected Output:

Initially: Value: 0
 Clicking '+' increments and '-' decrements the value.

Code In React

import React, { useState } from "react";
 
 const IncrementDecrement = () => {
  const [value, setValue] = useState(0);
 
  return (
  <div>
  <p>Value: {value}</p>
  <button onClick={() => {
  // Increment the value
  }}>+</button>
  <button onClick={() => {
  // Decrement the value
  }}>-</button>
  </div>
  );
 };
 
 export default IncrementDecrement;

Open Sandbox

Need help ?

Click on Hint to solve the question.

27. Write a component that dynamically renders a list of user profiles passed as hardcoded props.

Required Input:

users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]

Expected Output:

Alice
 Bob

Code In React

import React from "react";
 
 const UserList = (props) => {
  // Map over props.users to render the list
 };
 
 export default UserList;

Open Sandbox

Need help ?

Click on Hint to solve the question.

28. Create a component that displays an error message when a specific condition is met.

Required Input:

errorCondition = true

Expected Output:

Error: Something went wrong! (when the condition is true)

Code In React

import React from "react";
 
 const ErrorMessage = () => {
  const errorCondition = true;
 
  return (
  // Conditionally render the error message
    <></>
  );
 };
 
 export default ErrorMessage;

Open Sandbox

Need help ?

Click on Hint to solve the question.

29. Build a component that highlights a <div> when a checkbox is selected.

Expected Output:

The <div> has a yellow background when the checkbox is checked.

Code In React

import React, { useState } from "react";
 
 const HighlightDiv = () => {
  const [isChecked, setIsChecked] = useState(false);
 
  return (
  <div>
  <input type="checkbox" onChange={(e) => {
  // Update isChecked state
  }} />
  <div
  style={{
  backgroundColor: isChecked ? "yellow" : "transparent",
  width: "200px",
  height: "100px",
  }}
  >
  Highlight me!
  </div>
  </div>
  );
 };
 
 export default HighlightDiv;

Open Sandbox

Need help ?

Click on Hint to solve the question.

30. Write a React component that renders a button with a random label every time the page is refreshed.

Required Input:

labels = ['Click me!', 'Press here!', 'Try me!']

Expected Output:

The button displays a random label from the array.

Code In React

import React from "react";
 
 const RandomLabelButton = () => {
  const labels = ["Click me!", "Press here!", "Try me!"];
  const randomLabel = "Picked Label"// Pick a random label from the array
 
  return <button>{randomLabel}</button>;
 };
 
 export default RandomLabelButton;

Open Sandbox

Need help ?

Click on Hint to solve the question.

3 of 3