map is not a function in reactJS

Question

When I did a console.log(response.data), it returned 2 datasets namely post and user:

 const [dbdata,setDBData] = useState([])

useEffect(async() => {
        const response = await Axios.get('http://localhost:5000/api/posts/allpost', {withCredentials:true})
    setDBData(response.data)
    console.log(response.data)
    }, [])


{post: Array(2), user: Array(1)}
post: (2) [{…}, {…}]
user: [{…}]

So when I tried dbdata.post.map(), it says map() is a not function. What I am missing here? Many thanks in advance and greatly appreciated.

I'm guessing that the data is empty from the server. Check console.log on the response.data. — Or Assayag
– Or Assayag, Commented Dec 2, 2020 at 9:11
Please post the minimal code for people to help. from the snippet we are not sure which one threw error. dbdata.post.map() is not present in the code you shared. — Karthik R
– Karthik R, Commented Dec 2, 2020 at 9:16
Define your state like this - const [dbdata,setDBData] = useState({post: [], user: []}) — Sarun UK
– Sarun UK, Commented Dec 2, 2020 at 9:17
Thanks. So how do I solves this? Sorry am still not an experience a lot of scenarios. — Nat
– Nat, Commented Dec 2, 2020 at 9:19

Drew Reese · Accepted Answer · 2020-12-02 09:16:49Z

5

Issue

Initial state is an empty array []

const [dbdata,setDBData] = useState([]);

so dbdata.post and/or dbdata.user are both undefined if you are attempting to render and map them on the initial render.

dbdata.post.map(...) // <-- throws error since dbdata.post undefined

Solution

Provide correct initial state so the initial render has valid state to access and map.

const [dbdata,setDBData] = useState({ post: [], user: [] });

answered Dec 2, 2020 at 9:16

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

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

Collectives™ on Stack Overflow

map is not a function in reactJS

1 Answer 1

Issue

Solution

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related