consume an endpoint with axios and put the data into state

ProductList.js

import React from 'react'
import axios from 'axios'

const endpoint = 'https://raw.githubusercontent.com/ongithub/products/gh-pages/products.json'

class ProductList extends React.Component {
  state = {
    allProducts: []
  }
  // when component is mounted => fetchData
  componentDidMount() {
    this.fetchData()
  }
  fetchData = () => {
    axios.get(endpoint)
      .then((response) => {
        console.log(response);
        this.setState({
          allProducts: response.data
        })
      })
      .catch(function (error) {
        console.log(error);
      });
  }
  
  render(){
    return(
      <div>
        <h6>List of products</h6>
        <ul className='products'>
      
          {
            this.state.allProducts.map((product) =>
              <li key={product.id}>
                <Product product={product}/>
              </li>
            )
          }

        </ul>
      </div>
    )
  }
}

export default ProductList