I am using the . map method and i am getting phones.map is not a function error .

Below is my code

import { Link } from "react-router-dom";
import {React , useState , useEffect} from 'react'
import Axios from 'axios';
export default function Phones() {
  const [phones,setPhones] = useState([])
  useEffect(() => {
    Axios.get("https://dummyjson.com/products/search?q=phone")
    .then(res => {      
      setPhones(res.data)      
    }).catch(err => console.log(err))
  },[])
  const display_phones = phones.map(item => <h1> {item.name} </h1>)


  return(
  <div className="Phones">
      {display_phones}

    </div>
  
  )
}

CodePudding user response：

Because you get an object that has an array of products and you already have to map it.

{products: Array(4), total: 4, skip: 0, limit: 4}

Try the following:

const display_phones = phones.products.map(item => <h1> {item.title} </h1>)

FYI Your object does not have a key like name

CodePudding user response：

You initialize the state value for phones to an empty array:

const [phones,setPhones] = useState([])

So on the first render you can successfully .map() over that array. But later you update that state value:

setPhones(res.data)

Clearly whatever you update it to is not an array. So what is it? This is the URL you're accessing to fetch data:

https://dummyjson.com/products/search?q=phone

So let's make a request there and see what it returns...

{
   "products":[
      {
         "id":1,
         "title":"iPhone 9",
         "description":"An apple mobile which is nothing like apple",
         "price":549,
         "discountPercentage":12.96,
         "rating":4.69,
         "stock":94,
         "brand":"Apple",
         "category":"smartphones",
         "thumbnail":"https://dummyjson.com/image/i/products/1/thumbnail.jpg",
         "images":[
            "https://dummyjson.com/image/i/products/1/1.jpg",
            "https://dummyjson.com/image/i/products/1/2.jpg",
            "https://dummyjson.com/image/i/products/1/3.jpg",
            "https://dummyjson.com/image/i/products/1/4.jpg",
            "https://dummyjson.com/image/i/products/1/thumbnail.jpg"
         ]
      },
      {
         "id":2,
         "title":"iPhone X",
         "description":"SIM-Free, Model A19211 6.5-inch Super Retina HD display with OLED technology A12 Bionic chip with ...",
         "price":899,
         "discountPercentage":17.94,
         "rating":4.44,
         "stock":34,
         "brand":"Apple",
         "category":"smartphones",
         "thumbnail":"https://dummyjson.com/image/i/products/2/thumbnail.jpg",
         "images":[
            "https://dummyjson.com/image/i/products/2/1.jpg",
            "https://dummyjson.com/image/i/products/2/2.jpg",
            "https://dummyjson.com/image/i/products/2/3.jpg",
            "https://dummyjson.com/image/i/products/2/thumbnail.jpg"
         ]
      },
      {
         "id":71,
         "title":"Women Shoulder Bags",
         "description":"LouisWill Women Shoulder Bags Long Clutches Cross Body Bags Phone Bags PU Leather Hand Bags Large Capacity Card Holders Zipper Coin Purses Fashion Crossbody Bags for Girls Ladies",
         "price":46,
         "discountPercentage":14.65,
         "rating":4.71,
         "stock":17,
         "brand":"LouisWill",
         "category":"womens-bags",
         "thumbnail":"https://dummyjson.com/image/i/products/71/thumbnail.jpg",
         "images":[
            "https://dummyjson.com/image/i/products/71/1.jpg",
            "https://dummyjson.com/image/i/products/71/2.jpg",
            "https://dummyjson.com/image/i/products/71/3.webp",
            "https://dummyjson.com/image/i/products/71/thumbnail.jpg"
         ]
      },
      {
         "id":86,
         "title":"Bluetooth Aux",
         "description":"Bluetooth Aux Bluetooth Car Aux Car Bluetooth Transmitter Aux Audio Receiver Handfree Car Bluetooth Music Receiver Universal 3.5mm Streaming A2DP Wireless Auto AUX Audio Adapter With Mic For Phone MP3",
         "price":25,
         "discountPercentage":10.56,
         "rating":4.57,
         "stock":22,
         "brand":"Car Aux",
         "category":"automotive",
         "thumbnail":"https://dummyjson.com/image/i/products/86/thumbnail.jpg",
         "images":[
            "https://dummyjson.com/image/i/products/86/1.jpg",
            "https://dummyjson.com/image/i/products/86/2.webp",
            "https://dummyjson.com/image/i/products/86/3.jpg",
            "https://dummyjson.com/image/i/products/86/4.jpg",
            "https://dummyjson.com/image/i/products/86/thumbnail.jpg"
         ]
      }
   ],
   "total":4,
   "skip":0,
   "limit":4
}

If that's the contents of the response (which is res in your code), then what do you expect res.data to be and why?

If the error was telling you that phones is undefined then we could conclude that res is probably this entire object and data isn't a property on this object, so you'd be setting state to undefined. But the error is specifically telling us that .map() is not a function. Which means res.data is something, and likely an object.

It seems that res.data is this entire object. So you're probably looking for the products property on this object:

setPhones(res.data.products)