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?

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
– W-B, Commented Jul 29, 2020 at 20:56

W-B · Accepted Answer · 2020-07-29 20:48:35Z

2

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*/})

edited Jul 29, 2020 at 20:48

answered Jul 29, 2020 at 20:43

W-B

1,2978 silver badges21 bronze badges

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

Comments

Omar K · Accepted Answer · 2020-07-29 20:41:28Z

2

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>
  )
})

answered Jul 29, 2020 at 20:41

Omar K

3,4213 gold badges25 silver badges41 bronze badges

Comments

Ganesh chaitanya · Accepted Answer · 2020-07-29 20:42:17Z

1

You can use as below :

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

answered Jul 29, 2020 at 20:42

Ganesh chaitanya

6486 silver badges18 bronze badges

Comments

Davia · Accepted Answer · 2020-07-29 20:44:02Z

0

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

answered Jul 29, 2020 at 20:44

Davia

1372 silver badges12 bronze badges

Comments

Tarukami · Accepted Answer · 2020-07-29 20:44:09Z

0

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

answered Jul 29, 2020 at 20:44

Tarukami

1,1607 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related