Iterating over array of objects with react

Question

I have a data object that I need to be able to iterate over which is an array of objects. I'm attempting to do so with Object.keys, but missing something with my implementation, as I get the error TypeError: Cannot read property 'metrics' of undefined.

The data object is constructed as such:

export const data = {
  metrics:
  [
    {
      number:'10',
      subText: 'content',
      tertiary: 'more content'
    },
    {...}
  ]
}

where the component is trying to iterate over the object like so:

 export const Metrics = (props) => {
  return (
      <div className="metric-container" aria-labelledby="metrics">
        {Object.keys(props.data.metrics).map((metric, i) => (
          <div className="metric"><h1>{metric.number}</h1><p>{metric.subText}</p><p>{metric.tertiary}</p></div>
        ))}
      </div>
    )
};

the data is imported into App.js with

import { data } from './assets/dataprops';

that has the component <Metrics {...data}/>

Anas · Accepted Answer · 2018-08-24 20:29:03Z

1

It should be:

<Metrics data={...data}/>

Otherwise, if you want to pass

<Metrics {...data}/>

You can access metrics like

 export const Metrics = (props) => {
  return (
      <div className="metric-container" aria-labelledby="metrics">
        {Object.keys(props.metrics).map((metric, i) => (
          <div className="metric"><h1>{metric.number}</h1><p>{metric.subText}</p><p>{metric.tertiary}</p></div>
        ))}
  </div>
)

};

answered Aug 24, 2018 at 20:29

Anas

5,7455 gold badges43 silver badges72 bronze badges

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

2 Comments

Matt Over a year ago

I went with the second option, and removed data from props.data.metrics so that its just props.metrics, but now none of the data is showing in the DOM.

Anas Over a year ago

@Matt It could be, because you don't a key in your <div className="metric"> ?

Code-Apprentice · Accepted Answer · 2018-08-24 20:31:51Z

0

<Metrics {...data}/>

This passes each of the keys in data as props to Metrics. You can make one of two changes:

Access props.metrics instead of props.data.metrics.
Pass data as a prop:
```
<Metrics data={data}>
```

I suggest that you install the React Developer plugin for your browser. This adds a "React" tab to the developer tools window. On this tab, you can inspect components and their props and state. Using this tool helps you track down problems like the one you encountered here. You would immediately see that the Metrics component has no prop named data but that it does have a prop named metrics.

Note that since metrics is an array, you do not need to call Object.keys(). You can simply do props.metrics.map() directly.

answered Aug 24, 2018 at 20:31

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

1 Comment

Matt Over a year ago

Using props.metrics.map() directly was the solution. Thanks!

Collectives™ on Stack Overflow

Iterating over array of objects with react

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related