CODEWITHSUNDEEP
reactjsreact-native
mani agarwal
mani agarwal

Reputation: 1

Error: Invalid hook call. Hooks can only be called inside of the body of a function component in react-native

I am getting the error of invalid hook call. Can anyone please detect the thing which I am doing wrong. This code is for selecting the data n adding it to the cart. I want to use the state update but it is giving the error of invalid hook.

I am new to react-native and don't know all the parts perfectly please help.

const CarouselCardItem = ({ item, index }) => {
    
    const [orderItems, setOrderItems] = React.useState([])

    function editOrder(action, id, price) {
        let orderList = orderItems.slice()
        let item = orderList.filter(a => a.id == id)

        if (action == "+") {
            if (item.length > 0) {
                let newQty = item[0].qty + 1
                item[0].qty = newQty
                item[0].total = item[0].qty * price
            } else {
                const newItem = {
                    id: id,
                    qty: 1,
                    price: price,
                    total: price
                }
                orderList.push(newItem)
            }

            setOrderItems(orderList)
            console.log(orderItems)
        } else {
            if (item.length > 0) {
                if (item[0]?.qty > 0) {
                    let newQty = item[0].qty - 1
                    item[0].qty = newQty
                    item[0].total = newQty * price
                }
            }

            setOrderItems(orderList)
        }
    }

    function getOrderQty(id) {
        let orderItem = orderItems.filter(a => a.id == id)

        if (orderItem.length > 0) {
            return orderItem[0].qty
        }

        return 0
    }

    function getBasketItemCount() {
        let itemCount = orderItems.reduce((a, b) => a + (b.qty || 0), 0)

        return itemCount
    }

    function sumOrder() {
        let total = parseFloat(orderItems.reduce((a, b) => a + (b.total || 0), 0))

        return total.toFixed(2)
    }

    const finalSumOrder = (sumOrder) => {  
        navigation.navigate("OrderDeliveryScreen", {
          sumOrder,
        })  
    } 

    return (
        <View style={styles.container} key={index}>
            <Image
                source={{ uri: item.imgUrl }}
                style={styles.image}
            />
            
        <Text style={styles.header}>{item.title}</Text>
        <Text style={styles.body}>{item.description}</Text>
        </View>
    )
}

Upvotes: 0

Views: 103

Answers (1)

Dani
Dani

Reputation: 895

Only Call Hooks from React Functions Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components. ✅ Call Hooks from custom Hooks (we’ll learn about them on the next page). By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code. https://reactjs.org/docs/hooks-rules.html

Try using arrow function instead of function expression for the editOrder

const  editOrder = (action, id, price) => {...}

Upvotes: 1

Related Questions