import React, { Component } from ‘react‘; import Record from ‘./Record‘; import { getJSON } from ‘jquery‘; class Records extends Component { constructor() { super(); this.state = { error: null, isLoaded: false, records: [] }; } componentDidMount() { getJSON(‘https://5aa780cb7f6fcb0014ee24aa.mockapi.io/api/v1/records‘).then( res => { this.setState({ isLoaded: true, records: res }); }, error => { this.setState({ isLoaded: true, error }) } ) } render() { const { error, isLoaded, records } = this.state; if (error) { return <div>{ error.responseText }</div>; } else if (!isLoaded) { return <div>loading...</div> } else { return ( <div> <h2>Records</h2> <table className=‘table table-bordered‘> <thead> <tr> <th>Date</th> <th>Title</th> <th>Amount</th> </tr> </thead> <tbody> {records.map((record) => <Record {...record} key={record.id}/>)} </tbody> </table> </div> ); } } } export default Records;