0

I have used mui checkboxes by mapping them the following way:

 <FormControl component="fieldset">
                                <FormGroup aria-label="position" column >
                                    {sortedData.map((obj) => {
                                        return (
                                            <FormControlLabel
                                                value="type"
                                                control={<Checkbox color="primary"/>}
                                                label={obj}
                                                onChange={handleTypeCheckboxChange}
                                                labelPlacement="end"
                                            />
                                        );
                                    })}
                                </FormGroup>
                            </FormControl>

This is how my checkboxes look like:

enter image description here

Now I need to set my Next button disabled, unless the user has selected one checkbox or more. Also, I want to store the values of the selected checkboxes in an array so that I can access it later. How should this work?

halfer
  • 19,824
  • 17
  • 99
  • 186
Aldor
  • 193
  • 4
  • 19
  • You need to maintain state in the component that has these checkboxes. You could use a demo in [this answer](https://stackoverflow.com/a/63345708/6094348) as a reference. It not exactly what you want to do but it will give you an idea of what to do. – Yousaf Aug 11 '20 at 12:15
  • The problem is idk how many checkboxes there are gonna be, coz I'm mapping them. So how do i maintain a state for them? – Aldor Aug 11 '20 at 12:20
  • You are mapping over an array so number of checkboxes will be equal to the length of the array. – Yousaf Aug 11 '20 at 12:22

0 Answers0