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.
Example: In the following example, we have stored the currently selected button’s name (or some ID) in the state.
Filename: App.js
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:
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"}]