For my latest project, I am building a straightforward ecommerce website. One of the key features on the product page is the ability for users to select different attributes such as sizes and colors. These options are represented by clickable divs that pull data from GraphQl and are then dynamically generated onto the DOM using a map function.
return (
<div className="attribute-container">
<div className="attribute">{attribute.id.toUpperCase()}:</div>
<div className="attribute-buttons">
{attribute.items.map((item) => {
if (type === "Color") {
return (
<AttributeButton
key={item.id}
className="color-button"
style={{ backgroundColor: item.value }}
onClick={() => addAtribute({type: type, value: item.value })}/>
);
}
return (
<AttributeButton
key={item.id}
className="size-button"
size={item.value}
onClick={() => addAtribute({ type: type, value: item.value })}
/>
);
})}
</div>
</div>
);
I have imported an external component and have implemented logic to style the buttons differently based on their attribute type, specifically checking if the attribute's type is Color before rendering them with custom styling.
The challenge I am currently facing is ensuring that when a user clicks on one attribute button, its style changes, while also toggling back to the default style when another button is selected. Implementing the onClick functionality to change styles initially was simple, but managing the behavior to ensure only one button appears clicked at a time has proven to be more complex.
Below is the code snippet for the AttributeButton component:
class Button extends PureComponent {
constructor(props){
super(props);
this.state = {
selected: false,
}
}
render() {
return (
<div
className={ !this.state.selected ? this.props.className : "size-selected "+this.props.className}
style={this.props.style}
onClick={() => {this.props.onClick(); this.setState({selected: !this.state.selected}) }}
>
{this.props.size}
</div>
);
}
}
export default Button;
PS - I am required to use class components for this project, despite it not being my preferred choice.