How to make a Dynamic Checkbox with React Hook?

Question

Guys, how can I make this dynamic checkbox? Because this way it is there I have to create a useState for each checkbox, but when I go to pull these values from the bank will come diametrically, how to create the useState also dynamically? Snack of the working code: https://snack.expo.io/@wendellchristian/checkbox

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { RadioGroup, CheckBox  } from 'react-native-btr';

export default function App() {
    const [checked, setChecked] = useState(false);
    const [checked2, setChecked2] = useState(false);
    const [checked3, setChecked3] = useState(false);

  return (
    <View style={styles.container}>

      <View style={styles.viewCheckbox}>
        <View style={styles.checkbox}>
          <CheckBox
            checked={checked}
            onPress={item => setChecked(!checked)}
            color='#009688'
          />
        </View>
        <Text onPress={item => setChecked(!checked)}> Checkbox 1</Text>
      </View>

      <View style={styles.viewCheckbox}>
        <View style={styles.checkbox}>
          <CheckBox
            checked={checked2}
            onPress={item => setChecked2(!checked2)}
            color='#009688'
          />
        </View>
        <Text onPress={item => setChecked2(!checked2)}> Checkbox 2</Text>
      </View>
      
      <View style={styles.viewCheckbox}>
        <View style={styles.checkbox}>
          <CheckBox
            checked={checked3}
            onPress={item => setChecked3(!checked3)}
            color='#009688'
          />
        </View>
        <Text onPress={item => setChecked3(!checked3)}> Checkbox 3</Text>
      </View>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  viewCheckbox: {
    flexDirection: "row",
    marginBottom: 10,
  },
  checkbox: {
    width: 24,
  }
});

Answer 1

I do not know if I understood the idea well but I believe that you should use the useEffect so that in the loading is updated the state, imagining that the information comes from a bank, when the request is made you would keep the answer in a variable and would state, something more or less like this:

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import { RadioGroup, CheckBox  } from 'react-native-btr';

const resposta_da_requisicao = [{
        id: 1,
        checked: false,
        name: "Checkbox 1",
      },
      {
        id: 2,
        checked: false,
        name: "Checkbox 2",
      },
      {
        id: 3,
        checked: false,
        name: "Checkbox 3",
      },];

export default function App() {
    const [dinamico, setDinamico] = useState([]);

    useEffect(() => {
        setDinamico(resposta_da_requisicao);
      },[]);


    function handleCheckboxes(id) {
      setDinamico(dinamico.map(dinamico => dinamico.id === id ? {...dinamico, checked: !dinamico.checked} : dinamico))
    }

  return (
    <View style={styles.container}>

      <Text style={styles.titulo}>Checkbox Dinâmico</Text>

      {dinamico?.map(({ id, checked, name }) => (
      <View style={styles.viewCheckbox}>
        <View style={styles.checkbox}>
          <CheckBox
            checked={checked}
            onPress={() => handleCheckboxes(id)}
            color='#009688'
          />
        </View>
        <Text onPress={item => setDinamico(!dinamico)}> {name}</Text>
      </View>
      ))}

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  viewCheckbox: {
    flexDirection: "row",
    marginBottom: 10,
  },
  checkbox: {
    width: 24,
  },
  titulo: {
    marginBottom: 10,
  },
});