title: render: function - JSX failed to compilie with SyntaxError Unexpected token - Rails 5.1 Webpack Reactjs
body: <p>I'm having an issue running a React component as I get a Syntax Error:</p>
  
  <p>Failed to compile.</p>
  
  <pre><code>./app/javascript/RoastsJson/index.jsx Module build failed: SyntaxError: Unexpected token (6:10)   
    4 | class RoastsJson extends React.Component {
    5 | 
  &gt; 6 |   render: function() {
      |           ^
    7 |     roasts = this.props.roasts.map( function(roast) {
    8 |       return (
    9 |         &lt;tr key={roast.id}&gt; @ ./app/javascript/packs/roastsjson.jsx 3:0-36 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/roastsjson.jsx
  </code></pre>
  
  <p>just can't see why this would fail...my unrelated but I was having the same error when playing with files with <code>const = url</code> with the error pointing to the u in url.</p>
  
  <p><strong>app/javascript/RoatsJson/index.jsx</strong></p>
  
  <pre><code>import React from 'react'
  import ReactDom from 'react-dom'
  
  class RoastsJson extends React.Component {
  
    render: function() {
      roasts = this.props.roasts.map( function(roast) {
        return (
          &lt;tr key={roast.id}&gt;
            &lt;td&gt;{roast.name}&lt;/td&gt;
          &lt;/tr&gt;
        );
        console.log(roast);
      });
      return (
        &lt;div&gt;
          &lt;h1&gt;Roasts&lt;/h1&gt;
          &lt;div id="roasts"&gt;
            &lt;table&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Name&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {roasts}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  };
  
  
  export default RoastsJson
  </code></pre>
  
  <p>I understand I could(should) remove <code>function</code>, such as:</p>
  
  <pre><code>render() {
      roasts = this.props.roasts.map( function(roast)
  </code></pre>
  
  <p>but this then throws the following in the conosle:</p>
  
  <p><code>unreachable code after return statement</code></p>
  
  <p><strong>Context</strong>
  I'm trying to pull a Rails 5.1 resource called roasts into this react component.  in my <code>roasts_controller.rb</code>:</p>
  
  <pre><code>  def index
      @roasts = Roast.all
  
      render component: 'roatsjson', props: {roasts: @roasts}
  
    end
  </code></pre>