How to loop single const for multiple time in NextJs

Question

I would like to print the <Icon /> for 700 times on the same page. I'm new to NextJs. I use for loop to make it, and able to console.log, but I don't know how to print it. Anyone could help me? Appreciate it much.

Here my code is.

import React from 'react'
import { IoMdWoman } from 'react-icons/io'

const Icon = <IoMdWoman size={40} color='#E91E63' />

for (let i = 0; i < 700; i++) {
  console.log(Icon)
}

const test700 = () => {
  return (
    <ul>
      <li>{Icon}</li>
    </ul>
  )
}

export default test700

return new Array(700).map(_=> <ul> <li>{Icon}</li> </ul> ). use this as return value in your test700 function — Code Maniac
– Code Maniac, Commented Apr 9, 2020 at 12:36
You need to return an array of 700 elements. whereas you're just returning only one element. — Code Maniac
– Code Maniac, Commented Apr 9, 2020 at 12:37
@CodeManiac The OP likely wants 700 <li>s, not 700 <ul>s, if next.js uses jsx like react does... — Heretic Monkey
– Heretic Monkey, Commented Apr 9, 2020 at 12:38
@HereticMonkey ahh i guess you're right, next is a superset of react which has server side rendering capabilities as well, yeah in that case <ul> tag can be moved out of loop — Code Maniac
– Code Maniac, Commented Apr 9, 2020 at 12:42
@ThiagaRajServai Stack Overflow is not a code on demand service. CodeManiac has provided you with the code very kindly in their comments. You need to examine that code and figure out if it works for your circumstances and adjust it as needed. That's part of what being a programmer is all about. I know it's hard starting out, but the best thing to do is to take these nuggets of learning and work things out for yourself. — Heretic Monkey
– Heretic Monkey, Commented Apr 9, 2020 at 12:47

Sal · Accepted Answer · 2020-04-09 13:33:12Z

2

const array = Array(700).fill(undefined) // old syntax
// or
const array = [...Array(700)] // using spread syntax (produces the same as above)

const test700 = () => {
  return (
    <ul>
      {array.map(_=><li>{Icon}</li>)}
    </ul>
  )
}

answered Apr 9, 2020 at 13:33

Sal

9046 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to loop single const for multiple time in NextJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related