We can change the color of a button when it gets clicked, and also change the color of the previously selected button back to its initial original color using the map() function.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Project Structure
Example: In the following example, we have stored the currently selected button’s name (or some ID) in the state.
Filename: App.js
HTML
import React, { useState } from "react"; const App = () => { const menuItems = ["Easy", "Medium", "Hard"]; const [activeButton, setActiveButton] = useState(""); return ( <div> {menuItems.map((level, idx) => { return ( <button key={level} onClick={() => { setActiveButton(level); }} style={{ backgroundColor: activeButton === level ? "lightblue" : "" }} > {level} </button> ); })} </div> ); } export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Color Switches between the button on Click
Note: One thing we should take care of is to name the buttons differently. Also, a more encouraging way to do this is to use IDs for buttons like shown below:
const menuItems = [{id:1, name:"Easy"},
{id:2, name:"Medium"},
{id:3, name:"Hard"}]
