React render from a loop

Question

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>
  )
}

Answer 1

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:

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:

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:

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> .

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.

I've created a StackBlitz to demonstrate the functionality.

Answer 2

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