Jsx not rendering

[true gale]

I have this component map and pass props into them but it doesn’t render on the website. There’s no error too.

But the components works fine without using map function

[neat bramble]

Can you share a code snippet? It's impossible to help you otherwise

[true gale]

The individual components works but the it doesn’t work when I use it in the map

[neat bramble]

It should work for sure 🤔, are you in an Astro component?

[true gale]

Yeah

[neat bramble]

oooooh I know! A matter of a fews characters 🥲

[true gale]

It works all right when it use isolated

[neat bramble]

{
  data.map(e => <Stats {...e} />)
}

I made it really short here but you could still pass props manually

basically you were calling inside a function, and not returning it

[true gale]

Ok

Let me try it

Wow

It working

Thanks bro 😎

[neat bramble]

xd glad it worked!

[true gale]

Please can you elaborate it for me

[neat bramble]

For sure!

[true gale]

I don’t want to commit that mistake again

[neat bramble]

basically what you did was equivalent to the following

data.map(data => {
  const unusedVar = <Stats ... />
})

So you're not returning anything

However you could just update it to

data.map(data => {
  return <Stats ... />
})

I just made it more compact earlier by spreading props

Does it make sense?

[true gale]

Not really, I’m trying to understand it

[neat bramble]

for jsx to show your component, the map function must return something right?

but the way you called your component, you were missing the return keyword

[true gale]

Alright

Thanks 🙏, you have saved a soul today 😅😅😅😂

[neat bramble]

ahah a pleasure! Feel free to open another support thread if needed!