I don't use them, so am wondering if there is something good am missing? in what case would you prefer them over Arrays of Objects?

I don't understand how this code is working:

<div> // Display all posts under this div
  {posts.map((post) => (
    <div key={post.id}>
      <h2>{[post.title}</h2>
      <h3>{"Written by " + post.author}</h3>
      <p>{post.text}</p>
    </div>
   ))}
</div>

As far as I understand, array.map() returns another array. How does this code work? The map function in this case isn't returning JSX elements, its returning an array of JSX elements. How come this works?

Hi Everyone,

I have just posted a new article about rendering objects and data in react with Array.prototype.map for beginners.

How to render an array of objects with Array.map in React

Please have a read and let me know about any constructive feedback you might have in order for me to keep improving it.

Thanks!

solved the issue, missed a return statement in the mapping and removing the opening and closing tag inside the array. thanks for all of your help!

hey, googling hasn't helped me, because i've only found results for mapping over an array of date to create components. however, i wonder if it's possible to generate an array of actual components, to then render them? i would like to do that so i can use an index to increase a delay of an animation all of these components have for each component.

const navbarItems = [
<MotionOutlineHome />, 
<MotionOutlinePeople />, 
<MotionInfoOutline />, 
<MotionArrowDownward />, 
<MotionMessage />, 
<MotionOutlineLightmode />, 
<MotionOutlineDarkmode />
];

{navbarItems.map((Item, i) => {
<Item variants={variants} delay={(i * 0.5)} />;       
})}

having the array set up this way doesn't fix the issue as well:

const navbarItems = [
MotionOutlineHome, 
MotionOutlinePeople, 
MotionInfoOutline, 
MotionArrowDownward, 
MotionMessage, 
MotionOutlineLightmode, 
MotionOutlineDarkmode,  
];

any help would be appreciated :)

e: formatting is hard, for some reason this doesn't fit into one codeblock.