Getting the length of an array of objects in Reactjs

Question

I have an array of objects:

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" },
]

Which is set to the state and then rendered in my RangeSlider component:

 state = {
    boxOptions: boxOptions,
    tier: 0
  };
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <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} />
      </div>
    );
  }

When I try to get the length of it on my onChange handler, I get undefined:

  handleBoxChange = index => {
    console.log(this.state.boxOptions[this.state.tier].length, 'boxOptions')
  }

Why is this?

Link to Sandbox

this.state.boxOptions[this.state.tier] is an object, not an array. Did you mean this.state.boxOptions.length? — Elan Hamburger
– Elan Hamburger, Commented Apr 18, 2019 at 23:11

user2340824 · Accepted Answer · 2019-04-18 23:08:38Z

3

this.state.boxOptions[this.state.tier].length

this.state.boxOptions[this.state.tier] will work and return { 0: "$250", 1: "$500", 2: "$750", 3: "$1000", 4: "$1250", 5: "$1500" } however, Object doesn't have the property .length and this is why it returns undefined.

If you wanted the total number of properties on this object, you can use:

Object.keys(this.state.boxOptions[this.state.tier]).length

Object.keys(object) will return you an array of all the keys within an Object

answered Apr 18, 2019 at 23:08

user2340824

2,1522 gold badges15 silver badges19 bronze badges

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

1 Comment

a7dc Over a year ago

Thank you! I'm AFK atm but will confirm it works shortly and then accept as accepted answer when it allows me. Edit: just what I needed. Thanks again

Collectives™ on Stack Overflow

Getting the length of an array of objects in Reactjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related