CODEWITHSUNDEEP
javascriptreactjs
asem shaat
asem shaat

Reputation: 113

Check if group of several radio buttons is checked in React

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?

Upvotes: 0

Views: 163

Answers (1)

Cameron Pittman
Cameron Pittman

Reputation: 51

It's hard to say what exactly you should do without seeing the rest of your component. However, I highly recommend looking at React's documentation on forms. Namely, you probably want to see their example on Controlled Components to track the state of each attribute.

Upvotes: 1

Related Questions