CODEWITHSUNDEEP
reactjsreact-hooks
Prem Kumar
Prem Kumar

Reputation: 67

Cannot read property 'map' of undefined on useEffect hook

I recently started learning react and I got stuck in the above-mentioned error. I know there are plenty of answers to this error. yes, I have seen those solutions but I am not able to map those solutions to my problems. I am pasting my code below please tell me what is wrong with the below code. any help is very much appreciated. thank you.

const orders = () => {

    const [stateValue, setState] = useState({
        orders: [],
        loading: true
    });

    // getting the orders
    useEffect(() => {
        axiosInstance.get('/orders.json').then(res => {
            transformData(res);
            setState({loading: false});
        }).catch(err => {
            console.log(err)
            setState({loading: false});
        })
    }, []);

    // transforming firebase response(objects of objects) into array of objects
    const transformData = (response) => {

        const ordersData = [];
        if(response.data) {
            for (let key in response.data) {
                ordersData.push({
                    ...response.data[key],
                    id: key
                })
            }
        }

        setState({orders: ordersData});
    }
    
    let orders;
    orders = stateValue.orders.map((order) => <Order //error line
                key={order.id}
                ingredients={order.ingredients} 
                email={order.email}
                price={order.price}
                />); 
        
    if(stateValue.loading) {
        orders = <Loading />
    }

    return(
        <div>
             {orders}
        </div>
       
    )
}

Upvotes: 1

Views: 186

Answers (1)

Dennis Vash
Dennis Vash

Reputation: 53884

The setter function of useState hook DOES NOT MERGE STATE like in its class equivalent (it mentioned in the docs):

However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

// Merge with prev state in function component
setState(prev => ({...prev, loading: false}))

// In class component, the setter merges state by default
this.setState({loading: false});

Upvotes: 4

Related Questions