I am new to ReactJs and I have a stupid issue, I think, but I can't see a reason's place of it. My training code:

var ListComponent = React.createClass({
    render: function() {
        return (
            <li>{this.props.value}</li>
        );
    }
});

var TodoComponent = React.createClass({
    getInitialState: function() {
        return {
            listPoints: []
        }
    },
    addListPoint: function(event) {
        if (event.target.value !== '') {
            this.setState({
                listPoints: this.state.listPoints.push(event.target.value)
            });
        }
    },
    render: function() {
        var listPoints = [];
        for (var i=0; i<this.state.listPoints.length; i++) {
            listPoints.push(
                <ListComponent>{this.state.listPoints[i]}<ListComponent/>
            );
        }
        return (
            <ul>{listPoints}</ul>
            <input type="text" onBlur={this.addListPoint}/>
        );
    },
});


React.render(
    <TodoComponent />,
    document.getElementById('container')
);

And my traceback:

 Uncaught SyntaxError: embedded: Unterminated JSX contents (42:21)
  40 |  
  41 | React.render(
> 42 |     <TodoComponent />,
     |                      ^
  43 |     document.getElementById('container')
  44 | );
  45 | 

Every tag seems to be closed. Does someone point me to a place where the issue begun?

I am new to ReactJs and I have a stupid issue, I think, but I can't see a reason's place of it. My training code:

var ListComponent = React.createClass({
    render: function() {
        return (
            <li>{this.props.value}</li>
        );
    }
});

var TodoComponent = React.createClass({
    getInitialState: function() {
        return {
            listPoints: []
        }
    },
    addListPoint: function(event) {
        if (event.target.value !== '') {
            this.setState({
                listPoints: this.state.listPoints.push(event.target.value)
            });
        }
    },
    render: function() {
        var listPoints = [];
        for (var i=0; i<this.state.listPoints.length; i++) {
            listPoints.push(
                <ListComponent>{this.state.listPoints[i]}<ListComponent/>
            );
        }
        return (
            <ul>{listPoints}</ul>
            <input type="text" onBlur={this.addListPoint}/>
        );
    },
});


React.render(
    <TodoComponent />,
    document.getElementById('container')
);

And my traceback:

 Uncaught SyntaxError: embedded: Unterminated JSX contents (42:21)
  40 |  
  41 | React.render(
> 42 |     <TodoComponent />,
     |                      ^
  43 |     document.getElementById('container')
  44 | );
  45 | 

Every tag seems to be closed. Does someone point me to a place where the issue begun?

• javascript
• reactjs

• How are you transforming the JSX into JS? Webpack + babel? – Tom Commented Nov 17, 2015 at 12:20

2 Answers 2

You're not closing your list properly:

<ListComponent>{this.state.listPoints[i]}</ListComponent>

You wrote <ListComponent/> (a self-closing tag with no content)

Also you need to do what Kohei TAKATA says - render should have one root element (though in React 16+ you can return an array or wrap your elements in <React.Fragment>).

Your render function of TodoComponent returns 2 elements. I think it must be one element. Please try to enclose the 2 elements by <div> or something. Like this:

<div>
    <ul>{listPoints}</ul>
    <input type="text" onBlur={this.addListPoint}/>
</div>