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
Share
Improve this question
edited Apr 9, 2020 at 12:35
Heretic Monkey
12.1k7 gold badges61 silver badges131 bronze badges
asked Apr 9, 2020 at 12:33
ThiagaRaj ServaiThiagaRaj Servai
591 gold badge1 silver badge6 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
1 Answer
Reset to default 2const 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
版权声明:本文标题:javascript - How to loop single const for multiple time in NextJs - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742130607a2422140.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论