Skip to content

Commit c24aa5f

Browse files
tacigarEsoterikStare
tacigar
authored and
EsoterikStare
committed
[docs] Simplify checkbox examples (mui#20052)
1 parent 6753041 commit c24aa5f

File tree

4 files changed

+28
-48
lines changed

4 files changed

+28
-48
lines changed

‎docs/src/pages/components/checkboxes/CheckboxLabels.js‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,21 @@ export default function CheckboxLabels() {
2727
checkedG: true,
2828
});
2929

30-
const handleChange = name => event => {
31-
setState({ ...state, [name]: event.target.checked });
30+
const handleChange = event => {
31+
setState({ ...state, [event.target.value]: event.target.checked });
3232
};
3333

3434
return (
3535
<FormGroup row>
3636
<FormControlLabel
37-
control={
38-
<Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
39-
}
37+
control={<Checkbox checked={state.checkedA} onChange={handleChange} value="checkedA" />}
4038
label="Secondary"
4139
/>
4240
<FormControlLabel
4341
control={
4442
<Checkbox
4543
checked={state.checkedB}
46-
onChange={handleChange('checkedB')}
44+
onChange={handleChange}
4745
value="checkedB"
4846
color="primary"
4947
/>
@@ -57,7 +55,7 @@ export default function CheckboxLabels() {
5755
control={
5856
<Checkbox
5957
checked={state.checkedF}
60-
onChange={handleChange('checkedF')}
58+
onChange={handleChange}
6159
value="checkedF"
6260
indeterminate
6361
/>
@@ -66,11 +64,7 @@ export default function CheckboxLabels() {
6664
/>
6765
<FormControlLabel
6866
control={
69-
<GreenCheckbox
70-
checked={state.checkedG}
71-
onChange={handleChange('checkedG')}
72-
value="checkedG"
73-
/>
67+
<GreenCheckbox checked={state.checkedG} onChange={handleChange} value="checkedG" />
7468
}
7569
label="Custom color"
7670
/>

‎docs/src/pages/components/checkboxes/CheckboxLabels.tsx‎

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,23 +27,21 @@ export default function CheckboxLabels() {
2727
checkedG: true,
2828
});
2929

30-
const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
31-
setState({ ...state, [name]: event.target.checked });
30+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
31+
setState({ ...state, [event.target.value]: event.target.checked });
3232
};
3333

3434
return (
3535
<FormGroup row>
3636
<FormControlLabel
37-
control={
38-
<Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
39-
}
37+
control={<Checkbox checked={state.checkedA} onChange={handleChange} value="checkedA" />}
4038
label="Secondary"
4139
/>
4240
<FormControlLabel
4341
control={
4442
<Checkbox
4543
checked={state.checkedB}
46-
onChange={handleChange('checkedB')}
44+
onChange={handleChange}
4745
value="checkedB"
4846
color="primary"
4947
/>
@@ -57,7 +55,7 @@ export default function CheckboxLabels() {
5755
control={
5856
<Checkbox
5957
checked={state.checkedF}
60-
onChange={handleChange('checkedF')}
58+
onChange={handleChange}
6159
value="checkedF"
6260
indeterminate
6361
/>
@@ -66,11 +64,7 @@ export default function CheckboxLabels() {
6664
/>
6765
<FormControlLabel
6866
control={
69-
<GreenCheckbox
70-
checked={state.checkedG}
71-
onChange={handleChange('checkedG')}
72-
value="checkedG"
73-
/>
67+
<GreenCheckbox checked={state.checkedG} onChange={handleChange} value="checkedG" />
7468
}
7569
label="Custom color"
7670
/>

‎docs/src/pages/components/checkboxes/CheckboxesGroup.js‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ export default function CheckboxesGroup() {
2424
antoine: false,
2525
});
2626

27-
const handleChange = name => event => {
28-
setState({ ...state, [name]: event.target.checked });
27+
const handleChange = event => {
28+
setState({ ...state, [event.target.value]: event.target.checked });
2929
};
3030

3131
const { gilad, jason, antoine } = state;
@@ -37,17 +37,15 @@ export default function CheckboxesGroup() {
3737
<FormLabel component="legend">Assign responsibility</FormLabel>
3838
<FormGroup>
3939
<FormControlLabel
40-
control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
40+
control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
4141
label="Gilad Gray"
4242
/>
4343
<FormControlLabel
44-
control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
44+
control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
4545
label="Jason Killian"
4646
/>
4747
<FormControlLabel
48-
control={
49-
<Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
50-
}
48+
control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
5149
label="Antoine Llorca"
5250
/>
5351
</FormGroup>
@@ -57,17 +55,15 @@ export default function CheckboxesGroup() {
5755
<FormLabel component="legend">Pick two</FormLabel>
5856
<FormGroup>
5957
<FormControlLabel
60-
control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
58+
control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
6159
label="Gilad Gray"
6260
/>
6361
<FormControlLabel
64-
control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
62+
control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
6563
label="Jason Killian"
6664
/>
6765
<FormControlLabel
68-
control={
69-
<Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
70-
}
66+
control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
7167
label="Antoine Llorca"
7268
/>
7369
</FormGroup>

‎docs/src/pages/components/checkboxes/CheckboxesGroup.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ export default function CheckboxesGroup() {
2626
antoine: false,
2727
});
2828

29-
const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
30-
setState({ ...state, [name]: event.target.checked });
29+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
30+
setState({ ...state, [event.target.value]: event.target.checked });
3131
};
3232

3333
const { gilad, jason, antoine } = state;
@@ -39,17 +39,15 @@ export default function CheckboxesGroup() {
3939
<FormLabel component="legend">Assign responsibility</FormLabel>
4040
<FormGroup>
4141
<FormControlLabel
42-
control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
42+
control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
4343
label="Gilad Gray"
4444
/>
4545
<FormControlLabel
46-
control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
46+
control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
4747
label="Jason Killian"
4848
/>
4949
<FormControlLabel
50-
control={
51-
<Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
52-
}
50+
control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
5351
label="Antoine Llorca"
5452
/>
5553
</FormGroup>
@@ -59,17 +57,15 @@ export default function CheckboxesGroup() {
5957
<FormLabel component="legend">Pick two</FormLabel>
6058
<FormGroup>
6159
<FormControlLabel
62-
control={<Checkbox checked={gilad} onChange={handleChange('gilad')} value="gilad" />}
60+
control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
6361
label="Gilad Gray"
6462
/>
6563
<FormControlLabel
66-
control={<Checkbox checked={jason} onChange={handleChange('jason')} value="jason" />}
64+
control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
6765
label="Jason Killian"
6866
/>
6967
<FormControlLabel
70-
control={
71-
<Checkbox checked={antoine} onChange={handleChange('antoine')} value="antoine" />
72-
}
68+
control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
7369
label="Antoine Llorca"
7470
/>
7571
</FormGroup>

0 commit comments

Comments
 (0)