Top 30 React Practice Exercises for Beginners with Solutions

11. Build a component that changes the background color of a <div> when hovered over.

Expected Output:

The <div> changes its background color to blue when hovered over.

Code In React

import React, { useState } from "react";
 
 const HoverColor = () => {
  const [bgColor, setBgColor] = useState("white");
 
  return (
  <div
  style={{ backgroundColor: bgColor, width: "200px", height: "100px" }}
  onMouseEnter={() => {
  // Change the background color to blue
  }}
  onMouseLeave={() => {
  // Reset the background color to white
  }}
  >
  Hover over me!
  </div>
  );
 };
 
 export default HoverColor;

Open Sandbox

Need help ?

Click on Hint to solve the question.

12. Write a React component that conditionally displays 'Logged In' or 'Logged Out' based on a hardcoded boolean state.

Required Input:

isLoggedIn = true

Expected Output:

Logged In (if true) or Logged Out (if false).

Code In React

import React from "react";
 
 const LoginStatus = () => {
  const isLoggedIn = true; // Hardcoded state
 
  return (
  // Conditionally display "Logged In" or "Logged Out"
    <></>
  );
 };
 
 export default LoginStatus;

Open Sandbox

Need help ?

Click on Hint to solve the question.

13. Create a button that disables itself after being clicked once.

Expected Output:

The button text changes to 'Clicked!' and the button becomes disabled.

Code In React

import React, { useState } from "react";
 
 const DisableButton = () => {
  const [isDisabled, setIsDisabled] = useState(false);
 
  return (
  <button
  disabled={isDisabled}
  onClick={() => {
  // Disable the button and update the text
  }}
  >
  Click Me
  </button>
  );
 };
 
 export default DisableButton;

Open Sandbox

Need help ?

Click on Hint to solve the question.

14. Build a component that takes two hardcoded props, firstName and lastName, and displays the full name.

Required Input:

firstName = 'John', lastName = 'Doe'

Expected Output:

Full Name: John Doe

Code In React

import React from "react";
 
 const FullName = (props) => {
  // Use props to display the full name
 };
 
 export default FullName;

Open Sandbox

Need help ?

Click on Hint to solve the question.

15. Write a React component that displays a greeting based on the current hour (e.g., 'Good Morning,' 'Good Afternoon').

Expected Output:

Good Morning, Good Afternoon, or Good Evening based on the time of day.

Code In React

import React from "react";
 
 const Greeting = () => {
  const hour = new Date().getHours();
  let greeting;
 
  // Determine the greeting based on the hour
  return (
  // Display the appropriate greeting
    <></>
  );
 };
 
 export default Greeting;

Open Sandbox

Need help ?

Click on Hint to solve the question.

16. Create a component that renders a paragraph with a random color every time a button is clicked.

Expected Output:

The paragraph text color changes to a random color when the button is clicked.

Code In React

import React, { useState } from "react";
 
 const RandomColor = () => {
  const [color, setColor] = useState("black");
 
  const changeColor = () => {
  // Generate and set a random color
  };
 
  return (
  <div>
  <p style={{ color }}>This is random color text.</p>
  <button onClick={changeColor}>Change Color</button>
  </div>
  );
 };
 
 export default RandomColor;

Open Sandbox

Need help ?

Click on Hint to solve the question.

17. Build a simple React component that takes a hardcoded title prop and displays it in an <h1> tag.

Required Input:

title = 'Welcome to React'

Expected Output:

Welcome to React

Code In React

import React from "react";
 
 const Title = (props) => {
  // Use props.title to display the heading
 };
 
 export default Title;

Open Sandbox

Need help ?

Click on Hint to solve the question.

18. Write a component that renders a checkbox and displays 'Checked' or 'Unchecked' based on its state.

Expected Output:

Unchecked (initially), changes to Checked when the checkbox is checked.

Code In React

import React, { useState } from "react";
 
 const CheckboxStatus = () => {
  const [isChecked, setIsChecked] = useState(false);
 
  const handleChange = () => {
  // Update the checkbox state
  };
 
  return (
  <div>
  <input type="checkbox" onChange={handleChange} />
  <p>{isChecked ? "Checked" : "Unchecked"}</p>
  </div>
  );
 };
 
 export default CheckboxStatus;

Open Sandbox

Need help ?

Click on Hint to solve the question.

19. Create a React component that counts how many times a specific key (e.g., 'a') is pressed on the keyboard.

Expected Output:

Key 'a' pressed: 0 (increases each time 'a' is pressed).

Code In React

import React, { useState, useEffect } from "react";
 
 const KeyPressCounter = () => {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
  const handleKeyPress = (event) => {
  // Increment the count if "a" is pressed
  };
 
  // Add event listener
  return () => {
  // Cleanup event listener
  };
  }, []);
 
  return <p>Key "a" pressed: {count}</p>;
 };
 
 export default KeyPressCounter;

Open Sandbox

Need help ?

Click on Hint to solve the question.

20. Build a React component that shows or hides text when a button is clicked.

Expected Output:

A button toggles the visibility of 'This is hidden text.'

Code In React

import React, { useState } from "react";
 
 const ToggleText = () => {
  const [isVisible, setIsVisible] = useState(false);
 
  return (
  <div>
  <button onClick={() => {
  // Toggle the visibility of the text
  }}>
  {isVisible ? "Hide" : "Show"}
  </button>
  {isVisible && <p>This is hidden text.</p>}
  </div>
  );
 };
 
 export default ToggleText;

Open Sandbox

Need help ?

Click on Hint to solve the question.

2 of 3