React Js : .map is not a function

Question

I have json array as below -

[{"sup_Id":6,"sup_ShortCode":"A"},{"sup_Id":7,"sup_ShortCode":"B"},{"sup_Id":8,"sup_ShortCode":"C"},{"sup_Id":1000,"sup_ShortCode":"D"}]

React component reading this array as -

import React,{useEffect,useState} from 'react'
import axios from 'axios';
function AllSuppliers() {
    const [suppliers, setstate] = useState([])
    useEffect(() => {
        // GET request using axios inside useEffect React hook
        axios.get('http://localhost:62815/api/values/GetAllSuppliers')
            .then(x => setstate({suppliers:x.data}))
            .catch(error => {
                alert(error);
                
            });;
    }, []);
    return (
        <>
            <table style={{width: '50%'}}>
            <thead>
                <tr>
                <th>
                    Supplier Id
                </th>
                <th>
                    Supplier Name
                </th>
                
                </tr>
                </thead>
                {
                   
                    suppliers.map((supplier)=>supplier)
                }
            </table>
        </>
    )
}

export default AllSuppliers

I am getting -

TypeError: suppliers.map is not a function

error

I also tried with - suppliers[0].map since its an array. But this also did not worked.

Does you print the response data from the GetAllSuppliers request? — ToujouAya
– ToujouAya, Commented Mar 10, 2021 at 7:36
yes .. I am getting response data from GetAllSuppliers , I have made sure of that..also pasted part of response in question. — C Sharper
– C Sharper, Commented Mar 10, 2021 at 7:37
You should pass data as parameter in setstate function instead of pass an object — ToujouAya
– ToujouAya, Commented Mar 10, 2021 at 7:39
Are you sure you are getting a JS array and not JSON as a response from the API? If it's JSON have you tried to parse your JSON data before setting it into the state? setstate(JSON.parse(x.data)) — anmatika
– anmatika, Commented Mar 10, 2021 at 7:50

Yahav · Accepted Answer · 2021-03-10 07:58:12Z

2

You are setting your suppliers state to be an object in this line:

.then(x => setstate({suppliers:x.data}))

Instead, let the setstate handle the change of suppliers and only pass the variable like this:

.then(x => setstate(x.data))

assuming x.data is an array.

You can also change the following line suppliers.map((supplier)=>supplier) to (suppliers || []).map((supplier)=>supplier) this way in case x.data or suppliers get changed to null\undefined your app will not crash.

Also as mentioned above the usage of setstate is not recommended. I'd advise you read about this topic here: https://reactjs.org/docs/hooks-state.html

answered Mar 10, 2021 at 7:58

Yahav

1461 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Surya · Accepted Answer · 2021-03-10 07:37:36Z

1

Use this way as you are using Hooks

setstate(x.data)

instead of this way which uses in class component

setstate({suppliers:x.data})

answered Mar 10, 2021 at 7:37

Surya

5567 silver badges13 bronze badges

Comments

NeERAJ TK · Accepted Answer · 2021-03-10 07:46:50Z

1

Update the useState initialization as :

const [suppliers, setSuppliers] = useState([])

(It is more meaningful)

Also, Update the useEffect as :

useEffect(() => {
        axios.get('http://localhost:62815/api/values/GetAllSuppliers')
            .then(x => setSuppliers(x.data))
            .catch(error => {
                alert(error);
            });;
    }, []);

You need not set the state in an object when using React Hooks unlike normal class state.

answered Mar 10, 2021 at 7:46

NeERAJ TK

2,7151 gold badge18 silver badges34 bronze badges

Collectives™ on Stack Overflow

React Js : .map is not a function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related