Mobile/components/quiz/SportQuestion.tsx

import React from "react";
import Question, { QuestionChildProps } from "./Question";
import CheckButton from "../CheckboxComponent";
import { View } from "react-native";

export default React.forwardRef<any, QuestionChildProps>(
  (props, ref): React.ReactElement => {
    const { ...rest } = props;

    const [checkedOne, setCheckedOne] = React.useState(true);
    const [checkedTwo, setCheckedTwo] = React.useState(false);
    const [checkedThree, setCheckedThree] = React.useState(false);
    const [checkedFour, setCheckedFour] = React.useState(false);
    const [checkedFive, setCheckedFive] = React.useState(false);
    const [checkedSix, setCheckedSix] = React.useState(false);
    const [checkedSeven, setCheckedSeven] = React.useState(false);
    const [checkedEight, setCheckedEight] = React.useState(false);
    const [checkedNine, setCheckedNine] = React.useState(false);
    const handleChangeOne = () => {
      if (!checkedOne) {
        setCheckedOne(!checkedOne);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(false);
        setCheckedSix(false);
        setCheckedSeven(false);
        setCheckedEight(false);
        setCheckedNine(false);
      }
    };
    const handleChangeTwo = () => {
      if (!checkedTwo) {
        setCheckedOne(false);
        setCheckedTwo(!checkedTwo);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(false);
        setCheckedSix(false);
        setCheckedSeven(false);
        setCheckedEight(false);
        setCheckedNine(false);
      }
    };
    const handleChangeThree = () => {
      if (!checkedThree) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(!checkedThree);
        setCheckedFour(false);
        setCheckedFive(false);
        setCheckedSix(false);
        setCheckedSeven(false);
        setCheckedEight(false);
        setCheckedNine(false);
      }
    };
    const handleChangeFour = () => {
      if (!checkedFour) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(!checkedFour);
        setCheckedFive(false);
        setCheckedSix(false);
        setCheckedSeven(false);
        setCheckedEight(false);
        setCheckedNine(false);
      }
    };
    const handleChangeFive = () => {
      if (!checkedFive) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(!checkedFive);
        setCheckedSix(false);
        setCheckedSeven(false);
        setCheckedEight(false);
        setCheckedNine(false);
      }
    };
    const handleChangeSix = () => {
      if (!checkedFive) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(false);
        setCheckedSix(!checkedSix);
        setCheckedSeven(false);
        setCheckedEight(false);
        setCheckedNine(false);
      }
    };
    const handleChangeSeven = () => {
      if (!checkedFive) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(false);
        setCheckedSix(false);
        setCheckedSeven(!checkedSeven);
        setCheckedEight(false);
        setCheckedNine(false);
      }
    };
    const handleChangeEight = () => {
      if (!checkedFive) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(false);
        setCheckedSix(false);
        setCheckedSeven(false);
        setCheckedEight(!checkedEight);
        setCheckedNine(false);
      }
    };
    const handleChangeNine = () => {
      if (!checkedFive) {
        setCheckedOne(false);
        setCheckedTwo(false);
        setCheckedThree(false);
        setCheckedFour(false);
        setCheckedFive(false);
        setCheckedSix(false);
        setCheckedSeven(false);
        setCheckedEight(false);
        setCheckedNine(!checkedNine);
      }
    };

    return (
      <Question question="Quel sport  ?" {...ref} {...rest}>
        <View className={`flex-wrap flex-row`}>
          <CheckButton
            label="Course"
            value={checkedOne}
            onChange={handleChangeOne}
            fontAwesomeIcon={"person-running"}
          />
          <CheckButton
            label="Marche"
            value={checkedTwo}
            onChange={handleChangeTwo}
            fontAwesomeIcon={"person-walking"}
          />
          <CheckButton
            label="Rando"
            value={checkedThree}
            onChange={handleChangeThree}
            fontAwesomeIcon={"person-hiking"}
          />

          <CheckButton
            label="Skate"
            value={checkedFour}
            onChange={handleChangeFour}
            communityIcon={"skateboarding"}
          />
          <CheckButton
            label="Cyclisme"
            value={checkedFive}
            onChange={handleChangeFive}
            communityIcon={"bike"}
          />
          <CheckButton
            label="Basket"
            value={checkedSix}
            onChange={handleChangeSix}
            fontAwesomeIcon={"basketball"}
          />

          <CheckButton
            label="Cardio"
            value={checkedSeven}
            onChange={handleChangeSeven}
            antIcon={"heart"}
          />
          <CheckButton
            label="Yoga"
            value={checkedEight}
            onChange={handleChangeEight}
            communityIcon={"yoga"}
          />
          <CheckButton
            label="Autre"
            value={checkedNine}
            onChange={handleChangeNine}
            antIcon={"setting"}
          />
        </View>
      </Question>
    );
  }
);