I have a list of buttons from A to Z and only some buttons are highlighted when the particular letter has any brand. When I click on a particular letter the text colour of that button should change. I tried the below code but it removes the highlighted colour of other buttons and disabled buttons
constructor(props) {
super(props)
this.state = {
selectedButton : true
}
}
getBrandSortData(){
let btn_class = this.state.black ? "blackButton" : "whiteButton";
return(
<div className="BrandPageList_AlphabetContainer">
<button value="all" className="BrandPageList_AllButton" onClick={this.handleClick}>All</button>
{brandList.map((item,index) =>
{
let disbaled = !this.isBrandCharacterAvailable(item)
return(
<button
disabled= {disbaled}
value={item}
key={index}
block="BrandPageList_AlphabetButtons"
mods = {{enabled : !disbaled}}
onClick={this.handleClick}
className={btn_class}
>
{item}
</button>
)}
)}
</div>
)
}
handleClick = event =>{
const brandValues = event.target.value
if(brandValues === "all"){
return this.setAllBrands()
}
else{
let brandSortDataByCharacter = this.state.brandSortData[brandValues]
this.setState({
allBrands:
{
[brandValues]: brandSortDataByCharacter,
selectedButton: !this.state.selectedButton
},
})
}
}
I have the below css file
.blackButton{
color: white;
}
.whiteButton{
color: black;
}
How to change the colour of the text as shown in the link
You need to create a separate button component to not rerender the whole parent every time you apply changes to the children...
import { useState ) from 'react';
..
const Button = ({ clickCallback, initClass }) {
const [ state, setState ] = useState(initClass);
const toggleColor = () => {
setState(state === 'whiteButton' ? 'blackButton' : 'whiteButton' );
}
const handleClick = () => {
clickCallback(toggleColor);
}
render(
<button className={ state } onClick={ handleClick } ></button>
);
}
..
and in parent
import Button from 'location'; // button component
..
// inside the parent component
const clickCallback = toggleColor => {
this.state.activeButton && this.state.activeButton();
this.state.activeButton = toggleColor;
}
..
// and in the render
<Button clickCallback={ clickCallback } initClass={ btn_class } />
ofcourse this is an scaled down exaple, add the properties you need
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.