Harry Zumwalt Harry Zumwalt -4 years ago 187
Javascript Question

Syntax error in basic react-rails component

Rails can't render a basic react component I've just started building out due to a supposed syntax error in one of my components. Thus far I haven't been able to figure out why this syntax is incorrect.

Here is the error:

ActionView::Template::Error (SyntaxError: unknown: Unexpected token (11:11)
9 | render () {
10 | return (
> 11 | {this.renderMeetings()}
^
12 | );
13 | }
14 | ):
1: <h1>Events</h1>
2:
3: <%= react_component('SearchContainer', {}, {prerender: true}) %>
4:
5: <form action="/search_event" accept-charset="UTF-8" method="get">
6: <input type="search" name="search" placeholder="Search meetings"/>


And here is the suspect component:

class SearchResults extends React.Component {

renderMeetings() {
return this.props.meetings.map((meeting) => {
return <SearchResultsPost meeting={meeting} />
})
}

render () {
return (
{this.renderMeetings()}
);
}

}


Any help you can provide is much appreciated!

Answer Source

{} are required when you want to put some javascript code inside html element, since you are directly calling a function from return then {} are not required, if you use a div then you need to use {}, Write it like this:

render () {
    return (
      <div>{this.renderMeetings()}</div>
    );
}

or

render () {
    return (
       this.renderMeetings()
    );
 }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download