Can't get Category

[amandwivedi07]

`import React, { useState, useCallback } from "react";
import {
View,
StyleSheet,
ActivityIndicator,
FlatList,
ScrollView,
Dimensions
} from "react-native";
import { Container, Header, Icon, Item, Input, Text } from "native-base";
import { useFocusEffect } from '@react-navigation/native'
import baseUrl from "../../assets/common/baseUrl"
import axios from 'axios';

import ProductList from "./ProductList";
import SearchedProduct from "./SearchedProducts";
import Banner from "../../Shared/Banner";
import CategoryFilter from "./CategoryFilter";
import baseURL from "../../assets/common/baseUrl";

var { height } = Dimensions.get('window')

const ProductContainer = (props) => {
const [products, setProducts] = useState([]);
const [productsFiltered, setProductsFiltered] = useState([]);
const [focus, setFocus] = useState();
const [categories, setCategories] = useState([]);
const [productsCtg, setProductsCtg] = useState([]);
const [active, setActive] = useState();
const [initialState, setInitialState] = useState([]);
const [loading, setLoading] = useState(true)

useFocusEffect((
useCallback(
() => {
setFocus(false);
setActive(-1);

    // Products
    axios
      .get(`${baseURL}products`)
      .then((res) => {
        setProducts(res.data);
        setProductsFiltered(res.data);
        setProductsCtg(res.data);
        setInitialState(res.data);
        setLoading(false)
      })
      .catch((error) => {
        console.log('Api call error')
      })

    // Categories
    axios
      .get(`${baseURL}categories`)
      .then((res) => {
        setCategories(res.data)
      })
      .catch((error) => {
        console.log('Api call error')
      })

    return () => {
      setProducts([]);
      setProductsFiltered([]);
      setFocus();
      setCategories([]);
      setActive();
      setInitialState();
    };
  },
  [],
)

))

// Product Methods
const searchProduct = (text) => {
setProductsFiltered(
products.filter((i) => i.name.toLowerCase().includes(text.toLowerCase()))
);
};

const openList = () => {
setFocus(true);
};

const onBlur = () => {
setFocus(false);
};

// Categories
const changeCtg = (ctg) => {
{
ctg === "all"
? [setProductsCtg(initialState), setActive(true)]
: [
setProductsCtg(
products.filter((i) => i.category._id === ctg),
setActive(true)
),
];
}

}

return (
<>
{loading == false ? (

searchProduct(text)} /> {focus == true ? : null} {focus == true ? ( ) : ( {productsCtg.length > 0 ? ( {productsCtg.map((item) => { return( ) })} ) : ( No products found )}

 </View>

)} ) : ( // Loading )} ); };

const styles = StyleSheet.create({
container: {
flexWrap: "wrap",
backgroundColor: "gainsboro",
},
listContainer: {
height: height,
flex: 1,
flexDirection: "row",
alignItems: "flex-start",
flexWrap: "wrap",
backgroundColor: "gainsboro",
},
center: {
justifyContent: 'center',
alignItems: 'center'
}
});

export default `ProductContainer;````

import React from 'react';
import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { ListItem, Badge, Text } from 'native-base';

const CategoryFilter = (props) => {

return(
    <ScrollView
        bounces={true}
        horizontal={true}
        style={{ backgroundColor: "#f2f2f2" }}
    >
        <ListItem style={{ margin: 0, padding: 0, borderRadius: 0 }}>
            <TouchableOpacity
                key={1}
                onPress={() => {
                    props.categoryFilter('all'), props.setActive(-1)
                }}
            >
                <Badge
                    style={[styles.center, {margin: 5},
                        props.active == -1 ? styles.active : styles.inactive
                    ]}
                >
                    <Text style={{ color: 'white' }}>All</Text>
                </Badge>
            </TouchableOpacity>
            {props.categories.map((item) => (
                  <TouchableOpacity
                  key={item._id}
                  onPress={() => {
                      props.categoryFilter(item._id), 
                      props.setActive(props.categories.indexOf(item))
                  }}
              >
                  <Badge
                      style={[styles.center, 
                        {margin: 5},
                        props.active == props.categories.indexOf(item) ? styles.active : styles.inactive
                      ]}
                  >
                      <Text style={{ color: 'white' }}>{item.name}</Text>
                  </Badge>
              </TouchableOpacity>
            ))}
        </ListItem>
    </ScrollView>
)

}

const styles = StyleSheet.create({
center: {
justifyContent: 'center',
alignItems: 'center'
},
active: {
backgroundColor: '#03bafc'
},
inactive: {
backgroundColor: '#a0e1eb'
}
})

export default CategoryFilter;