React for loop create infinite call

Question

I'm currently encountering a problem when i'm calling a for loop in a functional/class component in React. For exemple if I want to create a simple function to render multiple td tr in a table React is going to infinite call the function.

class ReserveView extends Component {
  createTable() {
    const table = []

    for (let i = 0; i < 3; i + 1) {
      const children = []
      for (let j = 0; j < 5; j + 1) {
        children.push(<td>{`Column ${j + 1}`}</td>)
      }
      table.push(<tr>{children}</tr>)
    }
    return table
  }

  render() {
    return (
      <div>
        <table>
          {this.createTable()}
        </table>
      </div>
    )
  }

If i console.log(j) the console will output this

I'm using React for a year now and it's the first time I'm having this issue. Thanks a lot for your help

atomrc · Accepted Answer · 2021-03-25 14:14:55Z

3

Oh yeah, your problem lies in the fact that you never increase the i and j loop variant.

you need to do i++ and j++ instead of j + 1 :)

answered Mar 25, 2021 at 14:14

atomrc

2,5831 gold badge19 silver badges20 bronze badges

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

1 Comment

Alexandre Houmeau Over a year ago

I've just tried and it works !! thanks a lot :). I guess i'll have to change my linter !

Sinan Yaman · Accepted Answer · 2021-03-25 14:14:24Z

2

Change your +1s to ++

for (let i = 0; i < 3; i++) {
  const children = []
  for (let j = 0; j < 5; j++) {
    children.push(<td>{`Column ${j + 1}`}</td>)
  }
  table.push(<tr>{children}</tr>)
}
return table

answered Mar 25, 2021 at 14:14

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

Comments

Adam Cai · Accepted Answer · 2021-03-25 15:34:30Z

1

The correct answer has been posted above. Just a note that you may try ES6 map() function. It would be very useful when you are coding with React.

  createTable2() {
    const rows = Array(3).fill(null);
    const columns = Array(5).fill(null);
    return rows.map((item, ridx) => (
      <tr>
        {columns.map((item, cidx) => (
          <td>{`Row ${ridx + 1} - Column ${cidx + 1}`}</td>
        ))}
      </tr>
    ));
  }

Check out the demo here: https://codesandbox.io/s/table-demo-fgd9i

answered Mar 25, 2021 at 15:34

Adam Cai

3971 silver badge10 bronze badges

Collectives™ on Stack Overflow

React for loop create infinite call

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related