Home.js

import React, {Component} from 'react';
import '../App.css';
import Header from './Header';

export default class Home extends Component{
    constructor(){
        super();
        this.state = {
            list: [],
            error: null
        }
    }
    
    buildList =(data)=>{
        console.log(data);
        this.setState({list: data})
    }
    
    componentDidMount(){
        console.log('did mount')
        let url = 'https://prof3ssorst3v3.github.io/media-sample-files/products.json';
        fetch(url)
        .then(response => response.json())
        .then(this.buildList)
        .catch(error => {
            this.setState({error});
        })
    }
    
    render(){
        console.log('render')
        return (
            <div>
                <h1>This is HOME</h1>
                <Header />
                <ul>
                {
                    this.state.list.length === 0 &&
                    <li>Sorry No data available</li>
                }
                { this.state.list.length > 0 &&
                    this.state.list.map( (item) => (
                        <li key={item.id} id={item.id}>{item.title + " " + item.price}</li>
                    ))
                }
                </ul>
                {this.state.error &&
                    <h3>{this.state.error}</h3>
                }
            </div>
        )
    }
}