I'm trying to add the selected attributes(radio buttons) to the product.ps:// when im not using this.setState in the handleChange function , this almost works, except for the fact that instead of getting an array of multiple objects with selected attributes, I get an array of single object with multiple keys/values.
render() {
let product = this.state.currentProduct;
let selectedAttributes = [];
let testobj = {};
let handleChange = (evt,attribute) => {
let test = Object.assign({}, product);
testobj[attribute] = evt.target.value;
selectedAttributes.push(testobj);
let noDuplicates = [...new Set(selectedAttributes)];
test.selectedAttributes = noDuplicates;
this.setState((state) => ({
currentProduct: test,
}))
}
return (
<>
<ul className={`attributesList ${attribute.id}`} key={attribute.id}>
{product.attributes[i].items.map((item) => {
return (
<li>
<input className={attribute.id} onChange={(evt) => handleChange(evt,attribute.id)} type="radio" id={`attribute ${attribute.id} ${item.id}`} name={`attributesList ${attribute.id}`} value={item.displayValue}/>
<label className={`attribute ${item.id}`} style={{backgroundColor: item.value}} htmlFor={`attribute ${attribute.id} ${item.id}`}>{item.displayValue}</label>
</li>
)
})}
</ul>