'React Native calling new api search breaks checkbox
I am working in React Native to set up a checkbox to filter data coming from my api. I have the checkbox working and the filter working but when I put them together it breaks. When I put them together and click the checkbox it loads the correct data but the checkbox unchecks itself and ceases to function. I see nothing in the code that calls the api to get the new filtered data that would cause such a break. I have had to piece this together from different examples and documentation so anyone who can help would be appreciated.
import React, { useState, useEffect } from "react";
import { Pressable, StyleSheet, SafeAreaView, Text, FlatList, TouchableOpacity, CheckBox } from "react-native";
import client from "./../../api/client";
import Card from "./shared/card";
const ListView = ({ navigation }) => {
const [data, setData] = useState([]);
const [isSelected, setSelection] = useState(false);
//const grade = 2;
const getList = async (grade = 2) => {
const response = await client.get("/grade/?grade="+grade);
setData(response.data);
};
function MyCheckbox({grade}) {
const [isSelected, setSelection] = useState(false);
if (isSelected) {
getList(grade = 3);
console.log(grade);
}
return (
<>
<CheckBox
value={isSelected}
title="My Checkbox"
onValueChange={setSelection}
/>
<Text>T: {isSelected ? "1" : "2"}</Text>
</>
)
}
useEffect(() => {
getList();
}, []);
const mytext = "learn Kanji";
return (
<SafeAreaView style={styles.center}>
<Text style={styles.baseText}>Kanji Learning App</Text>
<Text style={styles.newText}>{mytext}</Text>
<Text>{data.length} Kanjis</Text>
<label>Grade 3</label>
<MyCheckbox
grade = "3"
isSelected={isSelected}
checked={isSelected}
/>
<Text>ddd: {isSelected} </Text>
<FlatList
data={data}
keyExtractor={(item) => item.idkanji_dict.toString()}
renderItem={({ item }) => {
return (
<TouchableOpacity
onPress={() => {
navigation.navigate("Detail", {objurl: item.absolute_url, hey: "It's Kanji"});
}}
>
<Card
kanji={item.kanji}
meaning={item.meaning}
/>
</TouchableOpacity>
);
}}
/>
</SafeAreaView>
)
};
const styles = StyleSheet.create({
center: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
title: {
fontSize: 36,
marginBottom: 16,
},
baseText: {
color: "navy",
fontSize: 30,
fontStyle: "italic",
},
newText: {
color: "red",
},
itemText: {
color: "green",
fontSize: 20,
},
checkbox: {
},
});
export default ListView;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
