Here is my code snippet:
<blink>
const [thisButtomSelected, setThisButtomSelected] = useState(false);
var thisButton = [];
const onAttributeClick = (e) => {
thisButton[e.currentTarget.value] = { thisID: e.currentTarget.id, thisName: e.currentTarget.name };
setThisButtomSelected(thisButton[e.currentTarget.value]);
}
return(
<div>
{data.item.attributes.map((attribute, index) => (
<div key={index} >
<p id={attribute.id}>{attribute.name}:</p>
<ul className="choose-attribute-container-ul">
{attribute.items.map((item) => (
<li key={item.id}>
<button
value={item.value}
id={item.id}
name={attribute.name}
className={_.isEqual(thisButtomSelected, { thisID: item.id, thisName: attribute.name }) ? 'attribute-button-selected' : 'attribute-button'}
onClick={onAttributeClick}
>
{item.displayValue}
</button>
</li>
))}
</ul>
</div>
))}
</div>
)
</blink>
Although the current implementation works fine, there is a minor issue where previously selected buttons get unclicked when a new button is clicked. I am trying to figure out how to preserve the state of the first selected button even after clicking on another one.
- Only one button can be active for each attribute
- The buttons' names should be utilized