How to display object's keys and values in react component [duplicate]

Question

I have ControlSection component that one of it's props is statistics object prop. I want to display with <h2> all the key and values of the object. How can I do it?

ControlSection:

const ControlSection = ({ statistics }) => {
    return (
        <div className='gameStatistics'>
            {
                Object.keys(statistics).forEach(key => 
                    <h2>key: statistics[key]</h2>
                )
            }
        </div>
    )
}

Statistics example:

const statistics = {
    Score: score,
    Level: level,
    Best: bestScore,
};

You can use object entries: Object.entries(statistics).map(([key,value])=><div>key:{key},value:{value}</div>) — HMR
– HMR, Commented Aug 20, 2019 at 20:34

ggorlen · Accepted Answer · 2019-08-20 20:45:03Z

22

forEach returns undefined. Use Array#map, which returns the JSX for each item in a new array.

JSX also requires the { } braces to evaluate text as JS.

Since you're creating a series of <h2> elements, React needs a key property to be set on the elements. Using keys from the object is sufficient since they're guaranteed to be unique strings. However, you might consider using a list (<ul> or <ol> parent element with <li> children) as an alternative to the header elements.

Also, you can use Object.entries to access both the key and value for each pair in an object in a slightly more intuitive way than statistics[key]:

const ControlSection = ({ statistics }) => {
    return (
        <div className='gameStatistics'>
            {
                Object.entries(statistics).map(([key, val]) => 
                    <h2 key={key}>{key}: {val}</h2>
                )
            }
        </div>
    );
};

edited Aug 20, 2019 at 20:45

answered Aug 20, 2019 at 20:35

ggorlen

59.3k8 gold badges119 silver badges173 bronze badges

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

Collectives™ on Stack Overflow

How to display object's keys and values in react component [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related