How To Change Background Color Of Button Onclick In React Js?

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 cli

Solution 1:

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_pageif (visible_in_pricing_page) {
    return<CategoryBtnindex = {index
    }
    name = {category.title
    }
    key = {category.id
    }
    {/** indicatethisistheselectedbutton  */}
    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;}