React - How to select all checkboxes based on one without using the map function

Question

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;

Answer 1

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>
  );
};