Losing key value pair in react when mapping over props

Question

After making multiple requests to an API, I promise.all() that request and make another request, sticking on some of the properties from the last request. This gives me:

(4) [{…}, {…}, {…}, {…}]
0: {product_id: "2", results: Array(4), productInfo: {…}}
1: {product_id: "3", results: Array(6), productInfo: {…}}
2: {product_id: "8", results: Array(9), productInfo: {…}}
3: {product_id: "7", results: Array(5), productInfo: {…}}
length: 4
__proto__: Array(0)

The productInfo: {...} is the key-value pair that I want. In this component on the bottom I console.log() the object and it appears, but then it's being lost inside the map() ? Why is that and how can I solve this?

const FormatRelated = ({ recommended }) => {
  //  eslint-disable-next-line no-console
  console.log(recommended)
  return (
    <div className="recommendedThumbNailsRow">
      {recommended.map(obj => {
        //  eslint-disable-next-line no-console
        console.log(obj);
        return <DisplayRelatedImg styles={obj} />;
      })}
    </div>
  );
};

Answer 1

Map function is an Array function Array Map .

If you want to loop through object props you should use something like this:

Object.keys(recommended).map(key => console.log(recommended[key]))