How can use my object like a array using with map function

Question

import React, { useContext } from 'react'

import styles from './subTheme-select.module.css'
import StoreContext from '../store'

const SUB_THEME = {
  blue: 'Blue',
  yellow: 'Yellow',
  pink: 'Pink',
  purple: 'Purple',
  orange: 'Orange',
  green: 'Green'
}

function SubThemeSelect() {
  const store = useContext(StoreContext)

  return (
    <div className={styles.container}>
      {SUB_THEME.map((subTheme) => (
        <label className={styles.label}>
          <input
            type="radio"
            value={subTheme}
            name={subTheme}
            checked={subTheme === store.subTheme}
            onChange={(e) => store.changeSubTheme(e.target.value)}
          />
          {SUB_THEME[subTheme]}
        </label>
      ))}
    </div>
  )
}

export default SubThemeSelect

I want a use SUB_THEME like an array like [blue, yellow, pink, purple, orange, green] how can I do this.

This is the error message.

How can handle that issue?

Does this answer your question? [Get array of object's keys](https://stackoverflow.com/questions/8763125/get-array-of-objects-keys) — Klaycon, Jul 29 '20 at 20:41
Can you specify if you what the keys for `'blue'` or if you want the values `'Blue'`. Many answers tell you how to get keys but i suspect you want the values. — W-B, Jul 29 '20 at 20:56

score 2 · Answer 1 · answered Jul 29 '20 at 20:41

Since you are trying to map an object you need to use Object.keys which returns an array of the objects keys that you can loop over.

Object.keys(SUB_THEME).map((key,index) => {
 const subTheme = SUB_THEME[key]
 return (
 <label className={styles.label}>
          <input
            type="radio"
            value={subTheme}
            name={subTheme}
            checked={subTheme === store.subTheme}
            onChange={(e) => store.changeSubTheme(e.target.value)}
          />
          {subTheme}
        </label>
  )
})

W-B · Accepted Answer · 2020-07-29T20:48:35.793

You want the Object.keys() function or the Object.values

const SUB_THEME = {
  blue: 'Blue',
  yellow: 'Yellow',
  pink: 'Pink',
  purple: 'Purple',
  orange: 'Orange',
  green: 'Green'
}
//this returns the keys
const theme_keys = Object.keys(SUB_THEME)
//this returns the values
const theme_values = Object.values(SUB_THEME)

Then you can map them like

theme_keys.map( key => {/*code here*/})
theme_values.map( key => {/*code here*/})

score 1 · Answer 3 · answered Jul 29 '20 at 20:42

1

You can use as below :

Object.keys(SUB_THEME).map( (key) => {
console.log(SUB_THEME[key]
})

answered Jul 29 '20 at 20:42

Ganesh chaitanya

638
6
18

score 0 · Answer 4 · answered Jul 29 '20 at 20:44

0

 Object.keys(SUB_GROUPED).map(x => {
    console.log(x)
 })

answered Jul 29 '20 at 20:44

Davia

73
10

score 0 · Answer 5 · answered Jul 29 '20 at 20:44

0

Get object keys firstly with Object.keys(SUB_THEME).

answered Jul 29 '20 at 20:44

Tarukami

1,160
5
8

How can use my object like a array using with map function

5 Answers5