Is there a way to have multiple select with checkbox more than one per row? For example, I have four options[a,b,c,d].How to make it 2 options per row, total 2 rows instead of 1 option for 4 rows.
☑a ☑b
☑c ☑d
I tried make it an array =[[a,b],[c,d]], map twice but value will read [a,b],ther outer most value. So when I choose a or b, value will be same [a,b] since code would be some pseudo code like:
<Select
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={array}
onChange={handleChange}
input={<OutlinedInput label="Tag" />}
renderValue={(selected) => selected.join(', ')}
MenuProps={MenuProps}
>
array.map((options)=>
<div value={options}> <-Value in select will compare value here to check match
options.map((option)=>
<MenuItem key={name} value={option}> <--this is the value I need
<Checkbox checked={personName.indexOf(option) > -1} />
<ListItemText primary={option} />)
</MenuItem>
</div>
)
Can anyone help?
