The shopping component is the screen the main Component that renders the cart Item, and I just pass the cart items into the Cart list component which displays my item in a certain format.

But whenever I call the add function in CartList component and I leave the page it doesn't seem to render the cart items anymore and freezes.

Is there any way to fix this issue?

export default class ShoppingCartScreen extends Component {
constructor(props) {
        super(props)
        this.state = {
            uid: Fire.shared.uid,
            cartList: [],
            loading: true
        }

    }

render() {
        switch (this.state.loading) {
            case false:
                return (
                   {
                    this.state.cartList.length > 0 ?
                        <ScrollView backgroundColor='#bbb'>
                           {this.state.cartList.map((c) => (
                             <CartList
                               name={c.item}
                               price={c.price}
                               qty={c.qty}
                               image={c.image}
                              navigation{this.props.navigation}/>
                             ))}
                            </ScrollView>

            default:
                return <View style={styles.loading} >
                    <ActivityIndicator size='large' color='#303233' />
                </View>
        }
    }
}

export default class CartList extends Component {

    constructor(props) {
        super(props)
        this.state = {
            name: this.props.name,
            image: this.props.image,
            qty: this.props.qty,
            price: this.props.price,
            cartId: '',
            found: false
        }

    }

    

    remove = (qty, name, p, img) => {
        let q = qty
        if (q > 1) {
            let q = qty
            q -= 1;
            const x = {
                image: img,
                item: name,
                price: p,
                qty: q,

            }
            if (this.state.found) {
                Fire.shared
                    .firestore
                    .collection('cart')
                    .doc(this.state.cartId)
                    .update({
                        items: x

                    })
                this.setState({ qty: q })
            }
        
    }