How to map array of unknown object keys

Question

Now I write it this way:

const array = [
  {name: 'somename', lastname: 'sometext'}
  {name: 'somename1', lastname: 'sometext1'}
  {name: 'somename2', lastname: 'sometext2'}
]

function Component({array}) {
  return (
    {array.map(( {name, lastname} ) => (
      <p>{name}<p>
      <p>{lastname}<p>
    ))}
  )
}

But I want to pass array of objects with any keys:

  {array.map(( {unknownKey, unknownKey1} ) => (
    <p>{unknownKey}<p>
    <p>{unknownKey1}<p>
   ))}

How write it correctly?

What keys do you want to show when rendering? All of them, or the ones specifically chosen by the caller of Component, or..? — CertainPerformance
– CertainPerformance, Commented Oct 12, 2022 at 5:30

CertainPerformance · Accepted Answer · 2022-10-12 05:35:37Z

If you want to show all values of the objects in <p>s, then map over the Object.values of the object being iterated over (don't destructure).

const array = [
  {name: 'somename', lastname: 'sometext'},
  {name: 'somename1', lastname: 'sometext1'},
  {name: 'somename2', lastname: 'sometext2'}
];

const Component = ({array}) => (
  array.map(
    object => Object.values(object).map(val => <p>{val}</p>)
  )
);
ReactDOM.createRoot(document.querySelector('.react')).render(<Component {...{ array }} />);

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div class='react'></div>

It would be nice if you could require the passed objects to have a key (a unique identifier for a given object to be rendered) as well - that way React will be able to re-render them more efficiently.

ShoaibAh · Accepted Answer · 2022-10-12 05:55:15Z

1

you first need to extract all the keys from every object and then extract its value from that object.

{array.map((obj) => {
    const keys = Object.keys(obj)
    return keys.map(key => <p>{obj[key]}</p>);
  })
 }

answered Oct 12, 2022 at 5:55

ShoaibAh

1774 bronze badges

1 Comment

chupapee Over a year ago

cool, this looks simpler than CertainPerformance's answer

thvroyal · Accepted Answer · 2022-10-12 05:34:15Z

0

I suggest a solution is define prop for the key which you want to render

function Component({array, firstKey, secondKey}) {
  return (
    {array.map(( item ) => (
      <p>{item[firstKey]}<p>
      <p>{item[secondKey]}<p>
    ))}
  )
}

answered Oct 12, 2022 at 5:34

thvroyal

1664 bronze badges

Collectives™ on Stack Overflow

How to map array of unknown object keys

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related