How To Build A Toggle In React | React JS Tutorial For Beginners

If you’re new to React JS and want to learn how to build a toggle component, you’re in the right place. Toggles are a common UI element used to switch between two states, and in this tutorial, we’ll walk you through the process of creating one in React.

Step 1: Set Up Your React Project

Before you can start building your toggle, you’ll need to set up a new React project. If you haven’t already installed Node.js and create-react-app, you can do so by running the following command in your terminal:

npm install -g create-react-app

Once create-react-app is installed, you can create a new project by running:

create-react-app toggle-app

After creating your new project, navigate into the project directory and start the development server by running:

npm start

Step 2: Create The Toggle Component

Now that your project is set up, it’s time to create the toggle component. In your src folder, create a new file called Toggle.js and add the following code:


import React, { useState } from 'react';

export default Toggle;


In this code, we’re using the useState hook to create a state variable called isOn, and a function called setIsOn to update it. We then use a button element with an onClick event listener to toggle the isOn state between true and false, and display the appropriate label based on its value.

Step 3: Use The Toggle Component In Your App

With the Toggle component created, you can now use it in your app. Open the App.js file in your src folder, and import the Toggle component at the top of the file:

import Toggle from './Toggle';

Then, add the Toggle component within the App component’s return statement, like so:


function App() {
return (

export default App;


After saving your changes, you should see the toggle button displayed in your app when you run npm start in your terminal.

Step 4: Test Your Toggle

Now that you’ve created and used the toggle component in your app, you can test it by clicking the button to see it switch between the ‘ON’ and ‘OFF’ states. Congratulations, you’ve successfully built a toggle in React!

That’s it for this tutorial–you’ve learned how to build a toggle in React. Keep experimenting with React’s state and events to create even more interactive components!