There is more than one button using the map function and display it. Want to change the Background color of a button that I click. And others want it as it is. And again when I click on another button then only change the BG color of that button only. There are two files. One component id define button component using map function and another one is button component. Main Component
state = {
categories: [],
selectedCategory: null,
value: 'test',
clicked1: false,
}
categorySelectedHandler = (id ,e) => {
this.setState({ selectedCategory: id });
}
const categoriesName = this.state.categories.map((category ,index) => {
// console.log("The current iteration is: " + index);
let visible_in_pricing_page = category.visible_in_pricing_page
if (visible_in_pricing_page) {
return <CategoryBtn
index = {index}
name={category.title}
key={category.id}
selectedId = {this.state.selectedCategory}
clicked={() => this.categorySelectedHandler(category.id)}
/>
}
});
CategoryBtn Component -
import React, { Component } from 'react';
import classes from './price-category-btn.css';
const CategoryBtn = props => {
return (
<div style={{display:"inline"}} >
<a>
<button
className= { classes.category_btn }
onClick={props.clicked}>{props.name}</button></a>
</div>
)
}
export default CategoryBtn;
You are passing the selectedId
prop to the CategoryBtn component, you can make use of it or you can pass in a boolean already
const categoriesName = this.state.categories.map((category, index) => {
// console.log("The current iteration is: " + index);
let visible_in_pricing_page = category.visible_in_pricing_page
if (visible_in_pricing_page) {
return <CategoryBtn
index = {
index
}
name = {
category.title
}
key = {
category.id
}
{/** indicate this is the selected button */}
selected = {this.state.selectedCategory === category.id}
clicked = {
() => this.categorySelectedHandler(category.id)
}
/>
}
});
In the categoryBtn component return the button with a dynamic class
<button
{/** use props.selected to dynamically set the class */}
className={`${classes.category_btn} ${props.selected}` ? classes.selectedCss : ''}
onClick={props.clicked}
>
{props.name}
</button>
And in your CSS module, you can have the class for the background-colour
.selectedCss
{ background-color: lightblue;}