State of one checkbox affecting the others

Question

I have this problem - I got multiple checkboxes as a part of my custom component (TimeButtonCheck) rendered on parent screen. On parent screen there is an array which is filled with - whether the checkboxes are checked or unchecked. But there is a problem happening. If I check/uncheck one of those checkboxes, all of them uncheck because they have same state in parent component. When I split the state into these child components I cant modify array of the parent component from child components. Can someone help me to solve this? Here is my code (child element):

    const TimeButtonCheck = props => {
const [ceknute, setCeknute] = useState(true);
const [pole, setPole] = useState(["9:00", "10:00", "11:00"]);

const checkHandler = (id) => {
    setCeknute(!ceknute);
    if(!ceknute) {
        const novePole = pole.slice();
        novePole.push(id);
        console.log("pushuj");
        setPole(novePole);
        console.log(novePole);
    }
    else
    {
        console.log("filtruj");
    }

};
return (
        <View style={styles.customButon}>
        <CheckBox
        checked = {ceknute}
        key = {props.key}
        onPress={(key) => {checkHandler(key)}}
        checkedColor = {Colors.primaryColor}
        containerStyle = {{padding:0,}}
        />

            <TouchableOpacity activeOpacity={0.5}>
                <Text 
                style={styles.textInButton}>
                {props.cas}
                </Text>
            </TouchableOpacity>
        </View>
);

And here is my parent component which is mapping those TimeButtonChecks on screen:

const JazdyInstruktor = props => {
    const pole = ["8:00", "9:00", "10:00"];
  const selectedStartDate = null;
  const [isLoading, setIsLoading] = useState(true);
  const [displayText, setDisplayText] = useState(true);
  const dataToMap = ["11:00", "12:00", "13:00", "14:00", "15:00"];


 const maper = (data) => {
    return(
      <View style = {{marginHorizontal: 18,}}>
      <View style ={styles.instruktor}>
      <InstruktorBar />
      </View>
      <View style = {styles.screen}>
      {data.map((item) => {
        return ( 
        <TimeButtonCheck
         key = {item}
         cas={item}
         />
   )})}
      </View>
      </View>
    );
  }

  const startDate = selectedStartDate ? selectedStartDate.toString() : '';
  const token = useSelector(state => state.auth.token);

    return(
    <View style={styles.container}>
    <CalendarPicker 
    onDateChange={dateChangeHandler}
    />
    <View>
    {(isLoading) ? ((displayText) ? (<View style={styles.centered}><Text>Pre zobrazenie volnych terminov si vyberte datum</Text></View>) : (<View style = {{paddingTop: 10,
      textAlign: 'center',}}><ActivityIndicator size='large' color={Colors.primaryColor}/></View>)) : **maper(dataToMap)**}
    </View>

    </View>

This is the case I can not modify parent array called pole through these child components - I can only modify separate arrays for every child component. Is there any way to solve this? Thank you.

Answer 1

Save the state in the parent component, the checkbox component only displays the data.

function CheckBox({ value, label, isChecked }) {
  return (
    <label>
      <input type="checkbox" checked={isChecked} value={value} />
      <span>{label}</span>
    </label>
  );
}

function Parent() {
  // list of checkbox, `value` should be the format we want to save, label is something we want to display to the users
  const list = [
    { value: "1100", label: "11:00" },
    { value: "1200", label: "12:00" },
    { value: "1300", label: "13:00" }
  ];
  // every item default is un-checked
  const [data, setData] = useState(() =>
    list.map(item => ({
      ...item,
      isChecked: false
    }))
  );

  // update the check status in the parent component
  function handleToggleCheckbox(value) {
    setData(list =>
      list.map(item => {
        if (item.value === value) {
          return {
            ...item,
            isChecked: !item.isChecked
          };
        }
        return item;
      })
    );
  }

  return (
    <div className="App">
      {data.map(({ value, label, isChecked }) => (
        <CheckBox
          key={value}
          checked={isChecked}
          value={value}
          label={label}
          onClick={() => handleToggleCheckbox(value)}
        />
      ))}
    </div>
  );
}

Answer 2

This is what happens when I console.log(data)

@