the console shows that the arrays in the state have been populated but I can't access the object[0]

Question

On my code you can see functions that populate the state being called on component will mount. I then log the state on the render and this is what I see on the log

As you can see the log will show me that the arrays in the state have been populated albeit a bit late, but I cannot log the first object in the arrays

I have a feeling this has something to do with the react render cycle but I can't figure out what. Thanks a lot for taking the time to view my question.

Answer 1

Have you tried initializing your state in the class constructor method? This way, the class's state will be initialized with the default values before the first attempt to render:

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allEvents: [],
            allArtists: []
        };
    }

    ...
    ...
}

Also, I agree with George Chanturidze's comment about using the componentDidMount lifecycle method instead of componentWillMount.

UPDATE: Added a snippet in an unsuccessful attempt to reproduce the issue

class App extends React.Component {
  state = {
    concatArray: [],
    es6Array: [],
    pushArray: []
  };

  componentWillMount = () => {
    var concat = this.state.concatArray.concat({
      name: "A_concat",
      value: 1
    }).concat({
      name: "B_concat",
      value: 2
    });
    this.state.pushArray.push({
      name: "C_push",
      value: 3
    });
    this.state.pushArray.push({
      name: "D_push",
      value: 4
    });
    this.setState({
      concatArray: concat,
      es6Array: { ...this.state.es6Array,
        ...[{
          name: "E_es6",
          value: 5
        }, {
          name: "F_es6",
          value: 7
        }]
      }
    });
  };

  render = () => {
    console.clear();
    console.log(this.state);
    console.log(this.state.concatArray);
    console.log(this.state.concatArray[0]);
    console.log(this.state.pushArray);
    console.log(this.state.pushArray[0]);
    console.log(this.state.es6Array);
    console.log(this.state.es6Array[0]);
    return null;
  };
}

const rootElement = document.getElementById("root");
ReactDOM.render( < App / > , rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>