ReactJS Accessing Nested Objects

Question

I'm making a call to https://api.coinmarketcap.com/v2/global/, to display each property, I can access active_cryptocurrencies and active_markets but not total_market_cap or total_volume_24h. It says they're undefined

import React, { Component } from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";
import styled from "styled-components";
import { ScaleLoader } from "halogenium";

import styleConstants from "../misc/style_constants.js";

import { connect } from "react-redux";

import { fetchMarketOverviewData } from "../actions/api";

const Wrapper = styled.section`
  color: ${styleConstants.get("Light")};
  margin: 20px 0;
`;

const Table = styled.table`
  width: 100%;
`;

const TableData = styled.td`
  &:nth-child(even) {
    text-align: right;
  }
  padding: 5px;
  border-bottom: #234558 solid 0.1px;
`;

const formatter = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  minimumFractionDigits: 0
});

export class Overview extends Component {
  state = {
    isLoading: true
  };

  static propTypes = {
    overview: PropTypes.object
  };

  static defaultProps = {
    overview: {}
  };

  componentDidMount() {
    this.props.fetchOverviewData;
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.overview === undefined) return null;
    console.log("next Props", nextProps);
    return {
      isLoading: false
    };
  }

  render() {
    if (this.state.isLoading) {
      return (
        <ScaleLoader
          color={styleConstants.get("Light")}
          size="16px"
          margin="4px"
        />
      );
    } else {
      let {
        active_cryptocurrencies,
        active_markets,
        quotes
      } = this.props.overview;
      console.log("Overview Render() : ", this.props.overview);
      return (
        <Wrapper>
          <Table>
            <tbody>
              <tr>
                <TableData>Total Market Cap</TableData>
                <TableData>{formatter.format()}</TableData>
              </tr>
              <tr>
                <TableData>Total 24 Volume</TableData>
                <TableData>{formatter.format(4)}</TableData>
              </tr>
              <tr>
                <TableData>Active Markets</TableData>
                <TableData>{active_markets}</TableData>
              </tr>
              <tr>
                <TableData>Active Currencies</TableData>
                <TableData>{active_cryptocurrencies}</TableData>
              </tr>
            </tbody>
          </Table>
        </Wrapper>
      );
    }
  }
}

const mapStateToProps = state => {
  const { data } = state.api.marketOverviewData;
  return {
    overview: data
  };
};

const mapDispatchToProps = dispatch => ({
  fetch: dispatch(fetchMarketOverviewData())
});

export default connect(mapStateToProps, mapDispatchToProps)(Overview);

Here is the codingsandbox any insight would be greatly appreciated, thanks.

There is something not right in your componentDidMount. I think you should be calling a function? But you are not. Additionally your mapDispatchToProps leads me to believe that within componentDidMount you want to call this.props.fetch() — Wolfie
– Wolfie, Commented May 11, 2018 at 3:47
Additionally, the data is undefined because it doesn't exist yet. Using componentDidMount, there will be an initial render, and since the fetch has not completed that data will be undefined. You either need to have some sort of mechanism to stop rendering until you get the data, ie loader, or have default values for the data that you need to access, so it can use that until the fetch is complete — Wolfie
– Wolfie, Commented May 11, 2018 at 3:49
Please let me know if any of that is not clear. These are surface observations from a quick glance at the code, which is why I didn't write an answer. — Wolfie
– Wolfie, Commented May 11, 2018 at 3:49
@Matthew if you write an answer, I will accept it. The issue is what you said, I meant to call fetch but I did not. — Paul McLoughlin
– Paul McLoughlin, Commented May 11, 2018 at 4:10

Wolfie · Accepted Answer · 2018-05-11 15:34:20Z

1

You will need to call this.props.fetch() instead of this.props.fetchOverviewData;

componentDidMount() {
    this.props.fetch();
}

Additional food for thought: Using componentDidMount, there will be an initial render, and since the fetch has not completed that data will be undefined. You either need to have some sort of mechanism to stop rendering until you get the data, ie loader, or have default values for the data that you need to access, so it can use that until the fetch is complete

answered May 11, 2018 at 15:34

Wolfie

1,3798 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS Accessing Nested Objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related