javascript - How to loop single const for multiple time in NextJs - Stack Overflow

admin管理员组

文章数量:1323524

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

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

• javascript
• reactjs
• loops
• for-loop
• next.js

Share Improve this question Follow edited Apr 9, 2020 at 12:35 Heretic Monkey 12.1k77 gold badges6161 silver badges131131 bronze badges asked Apr 9, 2020 at 12:33 ThiagaRaj ServaiThiagaRaj Servai 5911 gold badge11 silver badge66 bronze badges 8

• 2 return new Array(700).map(_=> <ul> <li>{Icon}</li> </ul> ). use this as return value in your test700 function – 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 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 Commented Apr 9, 2020 at 12:38
• 1 @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 Commented Apr 9, 2020 at 12:42
• 1 @ThiagaRajServai Stack Overflow is not a code on demand service. CodeManiac has provided you with the code very kindly in their ments. 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 Commented Apr 9, 2020 at 12:47

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 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>
  )
}

本文标签： javascriptHow to loop single const for multiple time in NextJsStack Overflow