Why can't i map this array of objects within an object

Question

Hi guy's i've been working with next.js, redux and sanity.io. It's been awful... Lol

Anyways here's the code i'm stuck with

ServiceCards.js 

import React from 'react';
import { useSelector } from 'react-redux';
import { getNavItems } from '../redux/actions/navItems';

const ServicesCards = () => {
  const services = useSelector((state) => state.services.services);

console.log(services)

  return (
    <>
    {Object.keys(services).map((item) => {

   

return(
  <h2>{item}</h2>
)



     
  
    })}
   
    </>
  );
};
export default ServicesCards;

as you can see i am connecting to the redux store perfectly and the data is been retuned like:

{0: {…}, 1: {…}, 2: {…}}
0:
body: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
locations: [{…}]
mainImage: {_type: 'image', asset: {…}}
slug: {_type: 'slug', current: 'patios'}
title: "Patios"
_id: "70f4ad81-f8eb-414a-8e76-da8bf98cc4de"
[[Prototype]]: Object
1: {_id: 'cc9548aa-ccf5-4688-a6ac-3b1a41f9896d', body: Array(10), locations: Array(1), mainImage: {…}, slug: {…}, …}
2:
body: (12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
locations: [{…}]
mainImage: {_type: 'image', asset: {…}}
slug:
current: "tree-removal"
_type: "slug"
[[Prototype]]: Object
title: "Tree Removal"
_id: "f63a0092-4b89-4ea9-9e49-f618d5f5f0b9"
[[Prototype]]: Object
[[Prototype]]: Object
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
__proto__: (...)
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

So the structure of the data i am getting back is

{
0:{...},
1: {...},
2:{...}

}

Usually i just use Object.keys to map objects and i have no issues using this, so why will it not work here?

Closer look at Object.keys

return (
    <>
      {Object.keys(services).map((item) => {
        return <h2>{item}</h2>;
      })}
    </>
  );

and this is what i get back from render

0
1
2

With no data at all.

store.js

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunkMiddleware from 'redux-thunk';
import { createWrapper } from 'next-redux-wrapper';
import reducer from './reducers/pages';

const middleware = [thunkMiddleware];

const initialState = {
  pages: {},
  navItems: {},
  services: []
};

const store = createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware(...middleware))
);

const initStore = () => {
  return store;
};

const wrapper = createWrapper(initStore, { debug: true });

export default wrapper;

i Have had to set initialState in next-redux-wrapper to get it to work, don't ask me why... I wish i would have stayed with Gatsby.js.

I really help someone can help with this as it's driving me crazy, i bet it's so simple!!

`Object.keys` returns an array of keys and not values. it should be something like this `{Object.keys(services).map((key) => { const item = services[key]; return
{item}
; })}` — Sonu Bamniya, Jan 12 '22 at 04:55
Glad it helped! Adding it as an answer so it's easy to find for others — Sonu Bamniya, Jan 12 '22 at 05:35

score 2 · Answer 1 · answered Jan 12 '22 at 05:31

2

You may use Object.values instead:

Object.values(services).map((item) => (
  <h2>{item}</h2>
))

answered Jan 12 '22 at 05:31

ProactiveThinker

63
1
8

score 1 · Answer 2 · answered Jan 12 '22 at 05:36

1

Object.keys returns an array of keys and not values. It should be something like this

{Object.keys(services).map((key) => { 
    const item = services[key];
    return <h2>{item}</h2>;       
})}

answered Jan 12 '22 at 05:36

Sonu Bamniya

1,095
1
13
29

Why can't i map this array of objects within an object

{item}

2 Answers2