ReactJs strange error: Syntax error: Unexpected token (26:39)

Question

This is my example code. I am just trying to execute some code from react documentation. I am trying ti render doubled list of numbers:

import React, { Component } from 'react';

class ListKeysComponent extends Component {
    constructor(props) {
        super(props);

        const numbers = [1, 2, 3, 5, 8, 13];
        const doubled = numbers.map((number) => number * 2);

        this.state = {
            numbers: numbers,
            doubled: doubled
        };
    }

    render() {
        if (this.state.value > 2000) {
            return null;
        }

        // render numbers in list elements

        return (
            <div>
                <ul>
                    for (var i = 0; i <= 5; i++) {
                        <li>{this.state.numbers[i]}</li>
                    }
                </ul>
            </div>
        );
    }
}

But I am not understanding why this code is generating this error message:

Failed to compile.

Error in ./src/ListKeysComponent.js
Syntax error: Unexpected token (26:39)

  24 |             <div>
  25 |                 <ul>
> 26 |                     for (var i = 0; i <= 5; i++) {
     |                                        ^
  27 |                         <li>{this.state.numbers[i]}</li>
  28 |                     }
  29 |                 </ul>

 @ ./src/App.js 22:25-55

edit: the solution from loop inside React JSX

render() {
    if (this.state.value > 2000) {
        return null;
    }

    var numrows = this.state.numbers.length;
    var list = []
    for (var i = 0; i < this.state.numbers.length; i++) {
        list.push(<li>{this.state.numbers[i]}</li>);
    }

    return (
        <div>
            <ul>
                {list}
            </ul>
        </div>
    );
}

Possible duplicate of [loop inside React JSX](http://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Felix Kling, Nov 30 '16 at 06:30
I know that is not working ^_^. I've create a question to solve it. I've read the linked response @FelixKling. But I really dont understand how to fix. — sensorario, Nov 30 '16 at 06:34
What about the accepted answer is unclear? You can literally copy the last code example and adjust it for your tags. — Felix Kling, Nov 30 '16 at 06:37

score 2 · Accepted Answer · answered Nov 30 '16 at 06:45

You can't include a for loop inside your JSX markup like that, although it feels like you should be able to. Instead, you can do something like this...

var RepeatModule = React.createClass({
  getInitialState: function() {
    return { items: [] }
  },
  render: function() {

    var listItems = this.props.items.map(function(item) {
      return (
        <li key={item.name}>
          <a href={item.link}>{item.name}</a>
        </li>
      );
    });

    return (
      <div>
        <ul>
          {listItems}
        </ul>
      </div>
    );
  }
});

Here's a post that goes into more detail about how to create repeating pieces of UI in a React component.

Swapnil · Answer 2 · 2016-11-30T06:48:31.633

0

Try this:

<ul>
    {
        this.state.numbers.map(number => <li>{number}</li>)
    }
</ul>

use Array.prototype.map which is available since JavaScript ES5 to handle this situation.

edited Nov 30 '16 at 06:48

answered Nov 30 '16 at 06:39

Swapnil

2,573
19
30

"Try this" is not very helpful / useful. *Explain* the problem and your solution so that others can learn! Still not a good explanation. Why should they use `.map`? Why isn't their code working? – Felix Kling Nov 30 '16 at 06:41
Also, this solution is not quite correct since you are creating an array of `undefined` values, not elements. – Felix Kling Nov 30 '16 at 06:43
What is undefined. The numbers array is defined in the state. I am suggesting to use Array.prototype.map to loop over it and render those many
elements.

Swapnil

Nov 30 '16 at 06:44

The callback you pass to `.map` returns `undefined`, hence you are creating an array that only contains `undefined` values. – Felix Kling Nov 30 '16 at 06:46

ReactJs strange error: Syntax error: Unexpected token (26:39)

2 Answers2