This questions already asked, but am not understand because am new in **React Js**. 

I try to list all product using `react js`, but it showing following error
[![enter image description here](https://i.stack.imgur.com/yNjin.png)](https://i.stack.imgur.com/yNjin.png)

This is my **ProductList.js** code

```
import React, { Component } from 'react'

class ProductList extends Component {
    state = {
        products : []
    }

    componentDidMount(){
        this.getProducts()
    }

    getProducts = _=>{
        fetch('http://localhost:2020/productList')
        .then(response => response.json())
        .then(response => this.setState({products : response.data}))
        .catch(err=>console.error(err))
    }

    renderProduct = (_id, productName) => <div key={_id}>{productName}</div>

    render() {
        const { products } = this.state;

        return (
            <div className="container">
                <h1>Product List</h1>
                <div>
                    { products.map(this.renderProduct) }
                </div>
            </div>
        )
    }
}
export default ProductList

```

Help me to solve this issue. 

> 
> Please suggest me Node js + React js + mongoDB tutorials.
> 
> 
>