title: Getting the length of an array of objects in Reactjs
body: <p>I have an array of objects:</p>
  
  <pre><code>const boxOptions = [
    { 0: "$250", 1: "$500", 2: "$750", 3: "$1000", 4: "$1250", 5: "$1500" },
    { 0: "$500", 1: "$750", 2: "$1000", 3: "$1250", 4: "$1500", 5: "$2000" },
    { 0: "$750", 1: "$1000", 2: "$1250", 3: "$1500", 4: "$2000", 5: "$2500" },
  ]
  </code></pre>
  
  <p>Which is set to the state and then rendered in my RangeSlider component:</p>
  
  <pre><code> state = {
      boxOptions: boxOptions,
      tier: 0
    };
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;h1&gt;Hello CodeSandbox&lt;/h1&gt;
          &lt;RangeSlider label='What sort of box are you after?' onChange={this.handleBoxChange} min={0} max={5} defaultValue={this.state.boxIndex} marks={this.state.boxOptions[this.state.tier]} step={null} /&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>When I try to get the length of it on my onChange handler, I get undefined:</p>
  
  <pre><code>  handleBoxChange = index =&gt; {
      console.log(this.state.boxOptions[this.state.tier].length, 'boxOptions')
    }
  </code></pre>
  
  <p>Why is this?</p>
  
  <p><a href="https://codesandbox.io/s/x9kz8olrmz" rel="nofollow noreferrer">Link to Sandbox</a></p>