'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