object.js with state in react ( Cannot read property 'map' of undefined)

Question

I am using js Object and in this object I have 3 section of data: first section (New Arrival) second section (Best Seller) and third section (Special Offer), when I use array.map() to loop the data this error happen

I saw many problems here like mine but no solution be right with me

this is the data

and this is the code

import ProductItem from './ProductItem';
import {getAll} from '../../api/product';

class Products extends Component {
   state ={
      products :[]
   };
componentDidMount(){
    getAll().then(data =>{
        this.setState({
            products :data
        })
        
    });
}
render() {
    
    return (
        <div className="container">
            <div className="head-with-border"><h2>New Arrival</h2></div>
            <div className="products">
                {this.state.products.bestSeller.map(product =>
                    <div className={"product"} key={product.id}>
                    <ProductItem product={product}/>
                    </div>
                )}
            
            </div>

        </div>
    )
  }
 }
 export default Products;

this is consols.log(data)

and this is getAll function

Answer 1

You have a race condtion in your code. The initial render happens befor you upload the data with fetch.

import ProductItem from './ProductItem';
import {getAll} from '../../api/product';

class Products extends Component {
   state ={
      products :[]
   };
componentDidMount(){
    fetchData()
}

const fetchData = async () => {
    let data = await getAll()
    this.setState({
        products :data
    })
}



render() {
    
    return (
    <div className="container">
        <div className="head-with-border"><h2>New Arrival</h2></div>
        <div className="products">
            {(this.state.products.bestSeller 
                ? this.state.products.bestSeller 
                : []
             ).map(product =>
                <div className={"product"} key={product.id}>
                <ProductItem product={product}/>
                </div>
            )}
        
        </div>

    </div>
    )
  }
 }
 export default Products;

Answer 2

You need to check for the default empty state:

import ProductItem from './ProductItem';
import {getAll} from '../../api/product';

class Products extends Component {
   state ={
      products: {}
   };
componentDidMount(){
    getAll().then(data =>{
        this.setState({
            products :data
        })
        
    });
}
render() {
    const { bestSeller } = this.state.products;
    
    return (
        <div className="container">
            <div className="head-with-border"><h2>New Arrival</h2></div>
            <div className="products">
                {bestSeller && bestSeller.map(product =>
                    <div className={"product"} key={product.id}>
                    <ProductItem product={product}/>
                    </div>
                )}
            
            </div>

        </div>
    )
  }
 }
 export default Products;

I also changed your default product state to an empty object instead of a array to align it with the data structure you are working with.