Syntax error in basic react-rails component

Question

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!

Mayank Shukla · Accepted Answer · 2017-03-01 07:38:04Z

1

{} 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()
    );
 }

edited Mar 1, 2017 at 7:38

answered Mar 1, 2017 at 7:29

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

1 Comment

Harry Zumwalt Over a year ago

Whoops! Thanks for your quick response!

Collectives™ on Stack Overflow

Syntax error in basic react-rails component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related