TypeError: Cannot read property '0' of undefined when using state

I am having an issue with trying to pass the Axios response data to the components. In the console log during the componentDidMount it will log just fine, but for the quote and value taking state it is saying it cannot read property 0 of undefined.

I am thinking it has something to do with the data not being loaded before the dom rendering causing the error. However everything I am reading online seems to say that this is the correct way to handle it.

import React, { Component } from 'react';
import Header from './components/header.js';
import Home from './components/home.js';
import './App.css';
import Axios from 'axios';

class App extends Component {
  constructor(props) {
    this.state = {
      sqlClosed: [],
      sqlClosedRebill: [],
      sqlPotential: [],
      sqlPotentialRepeat: [],
      sqlRebill: [],
      sqlRepeat: [],
      loaded: false,

  componentDidMount() {
    Axios.get('url', {
      headers: { 'Content-Type': 'application/json' },
      data: {},
      .then((response) => {
          sqlClosed: response.data.result.sqlClosed,
          sqlClosedRebill: response.data.result.sqlClosedRebill,
          sqlPotential: response.data.result.sqlPotential,
          sqlPotentialRepeat: response.data.result.sqlPotentialRepeat,
          sqlRebill: response.data.result.sqlRebill,
          sqlRepeat: response.data.result.sqlRepeat,
        this.setState({ loaded: true });
      .catch((error) => {

  render() {
    return (
        <Header />

export default App;

Leave a Comment