I created a simple form in React that displays the submitted data in the console. I created three checkboxes, the first one to mark the two below, and the other two regarding data processing. Is there a way to change the state of two checkboxes by clicking only the "Accept All" checkbox?
I found solutions that worked on checkboxes mapped from array, while my checkboxes are simply written in the code. I can't understand how I can target each of the two checkboxes that I need to make change in based on "Accept all" checkbox
Below is a styled component code that includes Processing div, label, checkbox and text for checkboxes
import styled from 'styled-components';
export const Processing = styled.div`
display: flex;
flex-direction: column;
gap: 24px;
@media (min-width: ${({ theme }) => theme.tabletPortrait}) {
flex: 1;
}
`;
export const Label = styled.label`
display: flex;
align-items: flex-start;
gap: 10px;
`;
export const Checkbox = styled.input`
width: 24px;
height: 24px;
`;
export const CheckboxText = styled.span`
font-size: 2rem;
font-weight: 300;
font-family: 'Mulish', sans-serif;
color: ${({ theme }) => theme.colors.white};
`;
Here is the Contact.jsx component
import {
Checkbox,
CheckboxText,
Label,
Processing,
} from './styles/Contact.styled';
const Contact = () => {
return (
<Processing>
<Label>
<Checkbox type='checkbox' />
<CheckboxText>Accept all</CheckboxText>
</Label>
<Label>
<Checkbox type='checkbox' defaultChecked={false} required />
<CheckboxText>I agree to the processing my data</CheckboxText>
</Label>
<Label>
<Checkbox type='checkbox' defaultChecked={false} required />
<CheckboxText>RODO processing my data by company</CheckboxText>
</Label>
</Processing>
);
};
export default Contact;
To control the state of another component you will have to use a controlled component. Usually it looks like this:
const Contact = () => {
const [isChecked, setIsChecked] = useState(false);
// Or whatever your prop names are
// The point is that Contact decides what the value of the checkbox should be
// and Checkbox reports back whenever it changes
return <Checkbox onChange={setIsChecked} value={isChecked} />
};
Now the parent component controls the value of the checkbox, it doesn't manage its own state. Which means you can write functions that change that state in the parent component.
const Contact = () => {
const [checks, setChecks] = useState([false, false, false]);
useEffect(() => {
if (checks[0]) setChecks([true, true, true]);
else setChecks([false, false, false]);
}, [checks[0]]);
const handleOnChange = n => () => {
// Or however you want to update a single value in a list
setChecks(c => [...c.slice(0, n), !checks[n], ...c.slice(n + 1)]);
};
return (
<Processing>
<Label>
<Checkbox onChange={handleOnChange(0)} type='checkbox' />
<CheckboxText>Accept all</CheckboxText>
</Label>
<Label>
<Checkbox onChange={handleOnChange(1)} type='checkbox' defaultChecked={false} required />
<CheckboxText>I agree to the processing my data</CheckboxText>
</Label>
<Label>
<Checkbox onChange={handleOnChange(2)} type='checkbox' defaultChecked={false} required />
<CheckboxText>RODO processing my data by company</CheckboxText>
</Label>
</Processing>
);
};