React Toggle Button - JavaScript Exercise #2

Overview

Create a toggle button component that switches between two states when clicked. The button should have two states: "On" and "Off". When the button is clicked, it should switch to the opposite state.

Requirements

• The toggle button should be a React component.

• The button should have two states: "On" and "Off".

• The button should switch between states when clicked.

• The button should display the current state.

• The button should be styled with CSS.

Instructions

1. Create a new React component called ToggleButton.

2. Add a state variable called isOn to the component's state, and initialize it to false.

3. Render a button element that displays the current state ("On" or "Off").

4. Add an onClick handler to the button that toggles the isOn state variable.

5. Use CSS to style the button to look like a toggle switch.

Bonus

• Add a prop to the component that allows the user to set the initial state.

• Add a callback prop that is called whenever the state changes.

Before you dive into the final output, I want to encourage you to take some time to work through the exercise yourself. I believe that active learning is the most effective way to learn and grow as a developer.

So, grab a pen and paper, fire up your code editor, and get ready to dive into the React Toggle Button exercise. Once you have completed the exercise, feel free to return to this blog post to compare your solution to mine.

Output for the Toggle Button exercise

import React, { useState } from "react";
import "./ToggleButton.css";

function ToggleButton({ initialOn = false, onToggle }) {
  const [isOn, setIsOn] = useState(initialOn);

  function handleClick() {
    setIsOn(!isOn);
    if (onToggle) {
      onToggle(!isOn);
    }
  }

  return (
    <button className={`toggle-button ${isOn ? "on" : "off"}`} onClick={handleClick}>
      {isOn ? "On" : "Off"}
    </button>
  );
}

export default ToggleButton;

.toggle-button {
  display: inline-block;
  padding: 10px;
  border: none;
  border-radius: 20px;
  background-color: gray;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.toggle-button.on {
  background-color: green;
}

.toggle-button.off {
  background-color: red;
}

This code creates a ToggleButton component that can be used in other React components. It uses the useState hook to keep track of the button's state (isOn), and updates the state whenever the button is clicked.

The component also uses CSS to style the button to look like a toggle switch. The on and off classes are used to set the background color of the button based on its current state.

To use the ToggleButton component, you can import it into another component and use it like this:

import React from "react";
import ToggleButton from "./ToggleButton";

function App() {
  function handleToggle(isOn) {
    console.log(`Button is now ${isOn ? "On" : "Off"}`);
  }

  return (
    <div>
      <ToggleButton initialOn={true} onToggle={handleToggle} />
    </div>
  );
}

export default App;

This code creates an App component that uses the ToggleButton component with an initial state of true. It also provides a callback function (handleToggle) that is called whenever the button is clicked and its state changes.

Thanks for taking this JavaScript exercise!

From the above exercise, you would learn how to create a reusable toggle component in React using state and props, and how to handle user interactions with the component through event handling. Additionally, you learn how to implement conditional rendering of components and the basics of CSS styling in React.

Overall, this exercise would help you gain a better understanding of React fundamentals and how to create reusable components that can be used in various parts of an application.

If you have any questions or comments, feel free to reach out to me on Twitter(@rajeshtomjoe), or follow me for more updates.

And if you'd like to receive more exercise on JavaScript, be sure to subscribe to my blog.