typeError

index.js

import React from 'react';
import { Flex, Box } from 'grid-styled';
import { handleResponse } from '../../helpers.js';
import { API_URL } from '../../config.js';
import Loading from '../../common/Loading';
import Table from './Table';

const API_KEY = process.env.REACT_APP_API_KEY;

class List extends React.Component {
  state = {
    loading: false,
    assets: [],
    error: null,
  };

  componentDidMount() {
    this.fetchAssets();
  }

  fetchAssets() {
    this.setState({ loading: true });

    fetch(`${API_URL}/assets?apikey=${API_KEY}`)
      .then(handleResponse)
      .then(data => {
        const { assets } = data;
        console.log(data)

        this.setState({
          assets,
          loading: false,
        });
      })
      .catch(error => {
        this.setState({
          error: error.errorMessage,
          loading: false,
        });
      });
  }

  render() {
    const { loading, error, assets } = this.state;
    // Render loading component if state is set to true
    if (loading) {
      return <Loading />;
    }

    // Render error component if error occured
    if (error) {
      return <div className="error">{error}</div>;
    }

    return (
      <Flex flexDirection="row" flexWrap="wrap" justifyContent="space-around">
        <Box w={1}>
          <Table assets={assets} />
        </Box>
      </Flex>
    );
  }
}

export default List;

Table.js

import React from 'react';
import { withRouter } from 'react-router-dom';
import { renderChangePercent } from '../../helpers';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const TableContainer = styled.div`
  overflow-x: auto;
`;

const StyledTable = styled.table`
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
`;

const TableHead = styled.thead`
  background-color: ${props => props.theme.colors.indigoDark};
  & > tr th {
    padding: 10px 20px;
    color: ${props => props.theme.colors.textSecondary};
    text-align: left;
    font-size: 14px;
    font-weight: 400;
  }
`;

const TableBody = styled.tbody`
  text-align: left;
  background-color: ${props => props.theme.colors.indigoNormal};
  & > tr td {
    padding: 24px 20px;
    border-bottom: 2px solid #0c2033;
    color: #fff;
    cursor: pointer;
  }
`;

const TableRank = styled.span`
  color: ${props => props.theme.colors.textSecondary};
  margin-right: 18px;
  font-size: 12px;
`;

const TableDollar = styled.span`
  color: ${props => props.theme.colors.textSecondary};
  margin-right: 6px;
`;

const Table = props => {
  const { assets } = props;

  return (
    <TableContainer>
      <StyledTable>
        <TableHead>
          <tr>
            <th>CryptoCurrency</th>
            <th>Price</th>
            <th>Market Cap</th>
            <th>24 Change</th>
          </tr>
        </TableHead>
        <TableBody>
          {assets.map(asset => (
            <tr key={asset.asset_id}>
              <td>{asset.name}</td>
            </tr>
          ))}
        </TableBody>
      </StyledTable>
    </TableContainer>
  );
};

// Table.propTypes = {
//   assets: PropTypes.array.isRequired,
//   history: PropTypes.object.isRequired,
// };

export default withRouter(Table);