-1

Galera, como posso fazer esse checkbox dinâmico? Porque desta forma que está ai tenho que criar um useState para cada checkbox, mas quando eu for puxar esses valores do banco irão vir diâmicamente, como criar os useState também dinamicamente? Snack do código funcionando: 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,
  }
});
1
  • Cria um array simples onde os objetos represente checkado e id pra saber quem é
    – novic
    Commented 20/10/2020 às 1:24

2 Respostas 2

-1

Não sei se entendi bem a idéia mas creio que você deverá usar o useEffect para que no carregamento seja atualizado o estado, imaginando que as informações vêm de um banco, quando for feita a requisição você guardaria a resposta em uma variável e setaria o estado, algo mais ou menos como isso:

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

Quando os dados forem retornados da sua api, virão tudo junto, em uma array de objetos.

Ao puxar as informações, insira em apenas um único estado e depois tudo o que precisa fazer é dar um map nesse estado, e imprimir de maneira dinamica e automatica, os checkbox.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .