I'm facing a problem that I seem to know but I don't know. I made "State" by [checked]. There is a problem that if you turn this to the map and click only one checkbox, the whole is clicked. So I put {cked[idx]} to solve it, but my senior advised me that there was a problem with the code. Because [checked] is in the form of "Boolean" and idx is "number".
And input has a 'disabled' attribute. I know that this is also deactivated as a whole because I put 'checked' in. By the way, I want each of them to be deactivated when I press the check box. But I don't know how. I searched for stack overflow, but I couldn't find a similar case to mine. I believe you guys can help me.
const [checked, setChecked] = useState(false);
.
.
.
{keys &&
keys?.map((item: any, idx: number) => {
return (
<div key={idx}>
<Box component="form" className={classes.Box}>
<div className={classes.typeText}>{item.columnName}</div>
<div className={classes.flexWrap}>
<TextField
id="outlined-basic"
label={item.type}
variant="outlined"
className={classes.filled}
disabled={checked} //hear❗️
/>
<FormControlLabel
value="end"
control={
<Checkbox
className={classes.checkBox}
color="primary"
checked={checked[idx]} //hear❗️
onChange={handleCheckboxChange}
/>
}
label="Null"
labelPlacement="end"
/>
</div>
</Box>
</div>
);
})}
Move your textfield and checkbox to a different component so each one can have its own state.
function CheckComponent = (item, handleCheckboxChange) => {
const [checked, setChecked] = useState(false);
return (
<Box component="form" className={classes.Box}>
<div className={classes.typeText}>{item.columnName}</div>
<div className={classes.flexWrap}>
<TextField
id="outlined-basic"
label={item.type}
variant="outlined"
className={classes.filled}
disabled={checked}
/>
<FormControlLabel
value="end"
control={
<Checkbox
className={classes.checkBox}
color="primary"
checked={checked}
onChange={handleCheckboxChange}
/>
}
label="Null"
labelPlacement="end"
/>
</div>
</Box>
);
}
Then render as many as you need
{keys && keys?.map((item: any, idx: number) => {
<CheckComponent key={idx} item={item} handleCheckboxChange={() => console.log("clicked", idx); } />
})}
Something along these lines.