TypeError: data.map is not a function in react

Question

I try to map data in react like

import React from 'react'
import axios from 'axios'
import {useEffect, useState} from 'react'

export default function Home() {
  const [data, setData] = useState([])
  useEffect(() => {
    axios.get('http://127.0.0.1:8000/api/books').then(res => {
      console.log(res.data)
            setData(res.data)
        }).catch(err => console.log(err))
    }, [])
  
  return (
    <div>
    
    {data.map(book => (
                <h1>{book.title}</h1>
            ))}
    </div>
  )
}

in console data show like

{data: Array(100)}
data
: 
(100) [{…}, {…}, {…}, {…}, {…}, ]
[[Prototype]]
: 
Object

the error is how to solve this issue i try many ways but not working please help me

user4546364 · Accepted Answer · 2023-02-08 06:31:42Z

3

console.log(res.data) shows it has a data object which consists the array. So you should set like setData(res.data.data). Currently you are setting the object, which cannot be used with map

answered Feb 8, 2023 at 6:31

user4546364

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

Comments

Venkatesh · Accepted Answer · 2023-02-08 06:33:44Z

1

You can see the console the data is {data: Array(100)}

so you need to update the state like

  setData(res.data.data)

answered Feb 8, 2023 at 6:33

Venkatesh

1032 silver badges12 bronze badges

Collectives™ on Stack Overflow

TypeError: data.map is not a function in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related