Rendering all nested objects from object in React

Question

I have here this object:

 const [generic, setGeneric] = useState ({
    f1: "Hi, Stack Overflow!",
    f2: "Hello!",
  });

I want to access all childs from it.
I have some code here, but it just don't work properly:

{Object.keys(generic).map((gen) => (
<>
<h1 key={gen}> 

{/* I also tried rendering files instead of gen, just don't work */}
</>
))

The expected result is:

<h1>Hi, Stack Overflow!</h1>
<h1>Hello</h1>

Andyally · Accepted Answer · 2022-06-21 22:48:08Z

1

{Object.entries(generic).map(([key, value]) => (
  
   <h1 key={key}>{value}</h1> 

 ))}

answered Jun 21, 2022 at 22:48

Andyally

1,1272 gold badges13 silver badges29 bronze badges

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

Comments

Alì Shadman · Accepted Answer · 2022-06-21 22:36:27Z

0

Try this

{Object.keys(generic).map((gen,index) => (
  
   <h1 key={index}>{generic[gen]}</h1> 

 ))}

answered Jun 21, 2022 at 22:36

Alì Shadman

2421 silver badge6 bronze badges