React unexpected token { } when trying to loop inside render

Question

I was following the example on the react website on how to loop inside render I've got what I wanted to accomplish done, but I have

var AdminForumContainer = React.createClass({
    getInitialState: function() {
        return { containers: [] }
    },
    componentDidMount: function() {
        $.ajax({
            method: 'GET',
            url: '/admin/manage/forum/populate',
            success: function(data) {
                console.log(data);
            }
        })  
    },
    render: function() {
        return (
            {this.state.containers.map(function(container) {
                return (
                    <table className="containers">
                    <caption>{container.containername}</caption>
                    <thead className="containerTitle">
                        <tr>
                            <td colspan="2">Main Threads</td>
                        </tr>
                    </thead>
                    <thead>
                        <tr>
                            <td>Thread Name</td>
                            <td>Delete</td>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            container.mainthreads.map(function(mainthread) {
                                return (
                                <tr>
                                    <td>{mainthread.threadname}</td>
                                    <td><button className="button alert">Delete</button></td>
                                </tr>
                                )
                            })
                        }
                        <tr>
                            <td><input type="text"/></td>
                            <td><button className="button" onclick={this.createMainThread(container.containerid)}>Create</button></td>
                        </tr>
                    </tbody>
                    <thead>
                        <tr>
                            <td colspan="2">Sub Threads</td>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            container.mainthreads.map(function(subthread) {
                                return (<tr>
                                    <td>{subthread.threadname}</td>
                                    <td><button className="button alert">Delete</button></td>
                                </tr>)
                            })
                        }
                        <tr>
                            <td><input type="text"/></td>
                            <td><button className="button" onclick={this.createSubThread(container.containerid)}>Create</button></td>
                        </tr>
                    </tbody>
                </table>
                )
            })}
        )
    }
});

but I get

Uncaught SyntaxError: http://localhost:8080/static/js/admin.jsx: Unexpected token (16:8)
  14 |  render: function() {
  15 |      return (
> 16 |          {this.state.containers.map(function(container) {
     |         ^
  17 |  
  18 |              <table className="containers">
  19 |                  <caption>{container.containername}</caption>

not sure what is wrong here. Thanks.

David L. Walsh · Accepted Answer · 2015-12-09 04:29:08Z

1

That line looks OK. It's the next line that's an issue. Your loop function needs a return statement. i.e.

{this.state.containers.map(function(container) {

    return (
        <table className="containers">

Same goes for the other functions passed to Array#map.

UPDATE: I've got it. Remove the surrounding braces. They're only needed inside a JSX container. i.e.

UPDATE Mk II: In fact you need a container since React components must have a single root element. So put the whole thing in a wrapper div. i.e.

render: function () {

    return (
        <div>
            {this.state.containers.map(function(container) {

edited Dec 9, 2015 at 4:29

answered Dec 9, 2015 at 4:08

David L. Walsh

24.9k10 gold badges63 silver badges50 bronze badges

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

5 Comments

Datsik Over a year ago

I've updated my question with the new code, I still get the same error, in the same spot

David L. Walsh Over a year ago

Are you sure your transpiler understands JSX?

Datsik Over a year ago

Yeah, all my other .jsx files work properly for the other components

David L. Walsh Over a year ago

OK I see the issue now after doing my own linting. Answer updated.

Datsik Over a year ago

Thanks, I've posted another question here if you're interested.

Collectives™ on Stack Overflow

React unexpected token { } when trying to loop inside render

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related