React render from a loop

I'm trying to do something very simple but its not playing well with my code. I can see it render but only 3 times and not 9

const renderTempBoxes = () =>
for (var i = 0; i < 10; i++)
console.log('i = ', i);
return <div className=styles.box key=i />;

;

const Component = () =>
return (
renderTempBoxes()
)



This doesn't even work, which is overkill to use an array when I just want 9 boxes to render.
UPDATE:

const Component = () =>
return (
<div>

[...Array(10)].map((x, i) =>
console.log('i = ', i);
return <div className=styles.box key=i />;
)

</div>
)



2 Answers
2

The first issue is that you simply cannot return individual elements from within the for loop like that. This is not specific to React, this is simply a JavaScript issue. Instead you can try something like this using Array.from to map an array of elements:

for

const renderTempBoxes = () => Array.from( length: 10 ).map((v, i) =>
<div className=styles.box key=i>i</div>
);


Or simply the for loop with Array.prototype.push to generate an array of elements and return it:

for

Array.prototype.push

const renderTempBoxes = () =>
let els = ;

for (let i = 0; i < 10; i++)
els.push(<div className=styles.box key=i>i</div>);


return els;
;


Rendering the elements:

const Component = () =>
return (
<div>
renderTempBoxes()
</div>
)



Or with React.Fragment to forgo the wrapping extra node:

React.Fragment

const Component = () =>
return (
<React.Fragment>
renderTempBoxes()
</React.Fragment>
)



The second issue with your example is that <div /> isn't going to really render anything, it's not a void/self-closing element such as <meta />. Instead you would need to do return the div element as <div className=styles.box key=i>whatever</div>.

<div />

<meta />

<div className=styles.box key=i>whatever</div>

Regarding the syntax [...Array(10)], there must be an Webpack in terms of how it handles/transpiles Array(10), [...Array(10)], [...new Array(10)], or even `[...new Array(10).keys()]. Either of the approaches described in the answer should solve your issue.

[...Array(10)]

Array(10)

[...Array(10)]

[...new Array(10)]

I've created a StackBlitz to demonstrate the functionality.

React.Fragment

<div className=styles.box key=i />

<div className=styles.box key=i>i</div>

When trying to render multiple times the same components use an array an map over it.

export default class MyComp extends Component {

constructor(props)
super(props)
this.state =
array: [key: 1, props: ..., key: 2, props: ..., ...]



render ()
return (
<div>
this.state.array.map((element) =>
return <div key=element.key ...element.props>
)
</div>
)




Remember to always set a unique key to every component you render

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.