I'm implementing a simple e-commerce that has a shopping cart. In my project there will be a page that displays all the details of the single product. In which there will be multiple selection of different attributes, which is going to be radio buttons. For instance, iPhone 13 has attributes like color and capacity. These attributes are coming from a GraphQL endpoint.

What I want to do is to create an ADD TO CART button. Before adding the product to the cart all attributes must be CHECKED.

Here is my code for rendering the attributes.

    {this.state.product.attributes.map(attribute=>{
    return (
        <>
            <h5>{attribute.name.toUpperCase() + ":"}</h5>
            <>
                {attribute.items.map(item =>{
                    return (
                        <>
                            <input onClick={()=>{}} type="radio" id={item.id + " " + attribute.name} name={attribute.name} value={item.value}/>
                            <label htmlFor={item.id + " " + attribute.name}>{item.displayValue}</label>
                        </>
                    )
                })}
            </>
        </>
    )
})}

Also, here is my code for the button

<button onClick={()=>{addProduct(this.props.id, this.state.product.prices)}}>ADD TO CART</button>

Let me know what should I do?