mapping through object which is inside object in react

Question

I have roomFeature.js file inside which there is object named as roomFeature. Inside roomFeature there is another object named beds with childs "single: "1", double: "2",". Here's what i am talking about:

const roomFeatures = {
 roomFeature: {
  bed: true,
  sleep: {
      single: "1",
      double: "3",
    },
 }
}

how can i access "1" if the "sleep" is available?

I have tried:

{roomFeatures.roomFeature.sleep.map((data) => {
 return (
  <div>
   <span>
    <BsFillPersonFill />
   </span>{" "}
    sleeps {data.single}
  </div>
 );
})}

You cannot use map method for objects. It can be only used for Arrays — igmani
– igmani, Commented Feb 8, 2023 at 10:38

XH栩恒 · Accepted Answer · 2023-02-08 10:33:13Z

2

If you only want to access to "1" one time then you can directly use {roomFeatures.roomFeature.sleep.single}

If you are trying to loop through the sleep object, you should convert it to an array before you use map function.

let temp_sleep = Object(roomFeatures.roomFeature.sleep);
temp_sleep.keys().map(key => {
    return (
    <div>
      <span>
        <BsFillPersonFill />
      </span>{" "}
      sleeps {temp_sleep[key]}
    </div>
  );
})

The keys function will return an array of keys in the object, so you can use the map function on the array.

answered Feb 8, 2023 at 10:33

XH栩恒

5454 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

mapping through object which is inside object in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related