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>

Answer 1

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

 ))}

Answer 2

Try this

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

 ))}