Question 169360 in Javascript Question posted in
A very good W3school tutorial can be found here.

Can Render props be used in a loop with NextJS & Javascript?

I’m trying to render the props in a loop (a forEach function), but I haven’t figure out how to 🙁

This is what I have so far:

{console.log('the catalog inside the component ----->', catalog)}
{Object.keys(catalog).forEach(key => {
    return (
        <div className='flex flex-col'>
            <p className='ml-12 mt-12'>`${key}`</p>
            <div className='flex justify-center items-center flex-wrap'>
            {catalog[key].forEach(item => {
                return (
                    <Image src={`/${key}/${item}`} width={150} height={150} alt={`${item}`} onClick={enlarge} className='cursor-zoom-in m-4' />
                )
            })}
            </div>
        </div>
    )
})}
<p>{catalog.Marca1[0]}</p>

Here’s what the catalog looks like:

the catalog inside the component -----> {
  Marca1: [ 'gafas1.png', 'gafas2.png', 'gafas3.png', 'gafas4.png' ],
  Marca2: [ 'gafas1.png', 'gafas2.png', 'gafas3.png', 'gafas4.png' ],
  Marca3: [ 'gafas1.png', 'gafas2.png', 'gafas3.png', 'gafas4.png' ],
  Marca4: [ 'gafas1.png', 'gafas2.png', 'gafas3.png', 'gafas4.png' ]
}

The last line does render in the page. I just added it for testing:

<p>{catalog.Marca1[0]}</p>

The whole project is here:
https://github.com/Tezcatlipoca0000/paver

I am teaching myself how to code, so I will have a lot of mistakes.
Any help would be greatly appreciated.
Thanks in advance 🙂

Tags:

2

Answers


  1. 0

    Array#forEach returns undefined. Use Array#map instead to transform an array.

    {Object.keys(catalog).map(key => (
    <div className='flex flex-col'>
        <p className='ml-12 mt-12'>`${key}`</p>
        <div className='flex justify-center items-center flex-wrap'>
        {catalog[key].map(item => (
            <Image src={`/${key}/${item}`} width={150} height={150} alt={`${item}`} onClick={enlarge} className='cursor-zoom-in m-4' />
        ))}
        </div>
    </div>
))}
    Login or Signup to reply.
  2. 0

    That is because foreach does not return values (it returns undefined):

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach#return_value

    You have to change the forEach method with map method which returns an array

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#return_value

    Code: not tested, only modify forEach methods with map methods

    {Object.keys(catalog).map(key => {
  return (
      <div className='flex flex-col'>
          <p className='ml-12 mt-12'>`${key}`</p>
          <div className='flex justify-center items-center flex-wrap'>
          {catalog[key].map(item => {
              return (
                  <img src={`/${key}/${item}`} width={150} height={150} alt={item} onClick={enlarge} className='cursor-zoom-in m-4' />
              )
          })}
          </div>
      </div>
  )
})}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search