Check if value is undefined before render React Native

by

I am using (Drop Down Picker library) to display categories of my data which I get from api call. I am waiting for api to fetch the data and then plan to display the categories. The problem is that I need to reformat data first and use hooks before render, but I can’t get it right.

how does the data for picker looks like:

items={[
    {label: 'USA', value: 'usa'},
    {label: 'UK', value: 'uk'},
    {label: 'France', value: 'france'/>},
]}

my hooks:

    const [country, setCountry] = useState("0");
    const [categoryData, setCategoryData] = useState();
    const [testingCategories, setTestingCategories] = useState({
        label: null,
        value: null,
    });

my effect hooks and reformatting the data:

//this hook calls api and sets the data to categories data of my type
useEffect(() => {
    getData(api.API_GET_DEPS, setIsLoading, setCategoryData);
}, []);

//this hooks reformats the data into acceptable format for picker
useEffect(() => {
    setTestingCategories(
        categoryData
            ? categoryData.map((item) => ({
                    label: item.DEPNAME, //label
                    value: item.DEPID,   //value
              }))
            : [{ label: null, value: null }]
    );
}, [categoryData]);

my render of drop down:

<View style={styles.container}>
                    {testingCategories ? (
                        <DropDownPicker
                            dropDownMaxHeight={300}
                            placeholder="All"
                            defaultValue={country}
                            items={testingCategories}
                            containerStyle={{ height: 50 }}
                            style={{ backgroundColor: "#fafafa" }}
                            itemStyle={{
                                justifyContent: "flex-start",
                            }}
                            dropDownStyle={{ backgroundColor: "#fafafa" }}
                            onChangeItem={(item) => {
                                console.log("changed");
                            }}
                            onOpen={() => setContainerOpacity(0.1)}
                            onClose={() => setContainerOpacity(1)}
                            labelStyle={{
                                fontSize: 16,
                                color: colors.dark,
                                fontWeight: "600",
                            }}
                            arrowSize={25}
                            arrowColor={colors.dark}
                        />
                    ) : (
                        <></>
                    )}

I get an error that drop down picker can’t match the defaultValue with any label in testingCategories because it is null and haven’t loaded yet. I suppose I am using setter wrong because I can’t check whether testingCategories‘s first element was loaded. What am I doing wrong?

9 thoughts on “Check if value is undefined before render React Native”

  1. You have a typing mismatch between your useState definition and where you use setTestingCategories later.

    In your useState, you define the initial value as a singular object:

    useState({
        label: null,
        value: null,
    });

    However, what you probably want is an empty array:

    useState([]);

    I would also change your current line [{ label: null, value: null }] to just be an empty array [].

    Then, your testingCategories flag will work, because testingCategories will initially be an array of length 0, which will fail the truthiness test.

    Reply

Leave a Comment