My component isn't returning the images

[dusk sapphire]

Hi, i'll add some context: I receive a string from the database which contains the file urls, then I parse it and try to render them in my page.

const Liveries = async (props: TLiveriesProps) => {
    const { data } = props;
    
    return (
        <div className="flex flex-col">
            {data.map((item, i) => {
                const previews = JSON.parse(item.preview);
                return (
                    <>
                        <a className="hover:bg-black hover:text-white">{item.name}</a>
                        {previews.forEach((previewImage: string, index: number) => {
                            <>
                                {console.log(previewImage)}
                                <p>{previewImage}</p>
                                <Image width={100} height={100} src={previewImage} alt="hi"/>
                            </>
                        })}
                    </>
                )
            })}
        </div>
    )
}```

my issue is that the console logs the image urls but Image coomponent isn't rendering them, I don't get any errors or http requests at all.

[marble plover]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[next moon]

can you send the links which you get returned? like a sample data set

[dusk sapphire]

/models/skinname/preview.jpg

And its correct because if i manually add an Image componente outside the foreach with that url It works fine

[next moon]

and you dont get errors on the browser console right?

[dusk sapphire]

No

[next moon]

can you inspect element the Image components and check if they have the correct links

[dusk sapphire]

Fact is i cant inspect them because they dont render in.

I've checked requests too, no 404 or 200 requests

[next moon]

try removing the console log and just map over the previews

[dusk sapphire]

Still they dont render in

[next moon]

weird, no clue other than that, sorry

[digital gate]

can you try for loop instead of forEach plz?

[sharp cargo]

Don't use forEach when tried to map an array and return a React component.
ForEach return VOID. Use map instead

[dusk sapphire]

Ima try later

Prolly that is the fix

[dusk sapphire]

Btw shouldnt i get the "this component isnt returning jsx" or something?

[sharp cargo]

Yes, check if your Eslint Extension is enabled, here my eslint complained about returning VOID.

[dusk sapphire]

Alright

[marble plover]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1163207465366732831 message)

[dusk sapphire]

Thank you so much

[digital gate]

@dusk sapphire i thought you said i tried map 😄