render: function - JSX failed to compilie with SyntaxError Unexpected token - Rails 5.1 Webpack Reactjs

Question

I'm having an issue running a React component as I get a Syntax Error:

Failed to compile.

./app/javascript/RoastsJson/index.jsx Module build failed: SyntaxError: Unexpected token (6:10)   
  4 | class RoastsJson extends React.Component {
  5 | 
> 6 |   render: function() {
    |           ^
  7 |     roasts = this.props.roasts.map( function(roast) {
  8 |       return (
  9 |         <tr key={roast.id}> @ ./app/javascript/packs/roastsjson.jsx 3:0-36 @ multi (webpack)-dev-server/client?http://localhost:3035 ./app/javascript/packs/roastsjson.jsx

just can't see why this would fail...my unrelated but I was having the same error when playing with files with const = url with the error pointing to the u in url.

app/javascript/RoatsJson/index.jsx

import React from 'react'
import ReactDom from 'react-dom'

class RoastsJson extends React.Component {

  render: function() {
    roasts = this.props.roasts.map( function(roast) {
      return (
        <tr key={roast.id}>
          <td>{roast.name}</td>
        </tr>
      );
      console.log(roast);
    });
    return (
      <div>
        <h1>Roasts</h1>
        <div id="roasts">
          <table>
            <thead>
              <tr>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              {roasts}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
};


export default RoastsJson

I understand I could(should) remove function, such as:

render() {
    roasts = this.props.roasts.map( function(roast)

but this then throws the following in the conosle:

unreachable code after return statement

Context I'm trying to pull a Rails 5.1 resource called roasts into this react component. in my roasts_controller.rb:

  def index
    @roasts = Roast.all

    render component: 'roatsjson', props: {roasts: @roasts}

  end

I get a further error when removing function. Just updated the post. — Simon Cooper, Jan 25 '18 at 19:24
maybe remove the `console.log(roast)` seeing as that code will never be reached because you return `roast` right before that? — tolgap, Jan 25 '18 at 19:25
@SimonCooper: Read the error message. Your code doesn't make sense. — SLaks, Jan 25 '18 at 19:57

Hemadri Dasari · Answer 1 · 2018-01-25T19:36:02.397

0

The issue I could see is roasts which is not defined in your component. The better way to render array off elements is to use an array and push elements to it and print that.

Also start using arrow functions to avoid scope issues and function bindings.

Check below updated code and it should work.

class RoastsJson extends React.Component {

  render() {
   let roasts = []
   this.props.roasts.map((roast) => {
      roasts.push(
        <tr key={roast.id}>
          <td>{roast.name}</td>
        </tr>
      )
    });
    return (
      <div>
        <h1>Roasts</h1>
        <div id="roasts">
          <table>
            <thead>
              <tr>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              {roasts}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
};


export default RoastsJson

edited Jan 25 '18 at 19:36

answered Jan 25 '18 at 19:30

Hemadri Dasari

32,666
37
119
162

Now getting an error boundary with that...https://reactjs.org/docs/error-boundaries.html. I need to read more about the arrow. – Simon Cooper Jan 25 '18 at 19:42
Are you using React v16? – Hemadri Dasari Jan 25 '18 at 19:47
yes. The context is that I'm trying to pull in a rails resource called roasts. – Simon Cooper Jan 25 '18 at 19:49
Are you getting this.props.roasts data? Are you passing roasts to RoastsJson as props from where it is being called? Can you also post exact error boundary error here? – Hemadri Dasari Jan 25 '18 at 19:51
just added my roasts controller to OP – Simon Cooper Jan 25 '18 at 19:54
What I am asking is are you getting this.props.roasts data in RoastsJson component? – Hemadri Dasari Jan 25 '18 at 19:56
I'm following this tutorial and trying to amend it for my purpose. https://rlafranchi.github.io/2016/04/11/reactjs-and-rails/ Brand new to React. Do we have to explicitly write in the component where to find 'roasts'? – Simon Cooper Jan 25 '18 at 20:02
I don't no about rails but in React you can get data from server in your component by making an ajax call as mentioned in the tutorial – Hemadri Dasari Jan 25 '18 at 20:12
maybe you should try playing a bit more with React before trying to bind data from Rails. Rails 5 and Webpacker can be tricky if you are not familiar with React before. There is many [awesome resources](https://github.com/enaqx/awesome-react) out there to start coding serious stuff in React without worrying about backends or api calls. – DoubleCompil Jan 25 '18 at 21:50

score 0 · Answer 2 · answered Jan 25 '18 at 20:09

It seems you pass an unexpected roasts props. You should try to use some checks on your props, using for example the prop-types library.

Also, it's generally a good practice to use pure fonction for a stateless component (see reactpatterns.com). Here one, un-tested :

import React from 'react';
import PropTypes from 'prop-types';

const RoastsJson = ({ roasts }) => (roasts && (<div>
  <h1>Roasts</h1>
  <div id="roasts">
    <table>
      <thead>
        <th>Name</th>
      </thead>
      <tbody>
        {
          roasts.map(({id, name}) => <tr key={id}>
            <td>{name}</td>
          </tr>)
        }
      </tbody>
    </table>
  </div>
</div>));

RoastsJson.propTypes = {
  roasts: PropTypes.array
};

export default RoastsJson;

render: function - JSX failed to compilie with SyntaxError Unexpected token - Rails 5.1 Webpack Reactjs

2 Answers2