顺风顺水：遍历ActiveRecord数组

Question

I am new to React with Rails and use of react-rails gem.

I am trying to loop through all lifts and show the liftname through Lift component.

The controller action index provides:

class LiftsController < ApplicationController

    def index
        @lifts = Lift.all
    end
end

Under assets/javascripts/components I have a lift.js.jsx component.

class Lifts extends React.Component {
  render() {
    const arr = {this.props.data}.map((x) => <li>Hello {x.liftname}!</li>);
    return (<ul>{arr}</ul>);    
  }
}

In the view page, I am passing the data as shown below:

<%= react_component('Lifts', data: @lifts) %>

But, I am receiving the error:

SyntaxError: unknown: Unexpected token (3:20)
  1 | class Lifts extends React.Component {
  2 |   render() {
> 3 |       const arr = {this.props.data}.map((x) => <li>Hello {x.liftname}!</li>);
    |                     ^
  4 |       return (<ul>{arr}</ul>);    
  5 |   }
  6 | }

My questions are:

1. Where I am going wrong
2. Is there any debugger for react which gives more info apart from unexpected token ?

Answer 1

Probably this line should be without curly braces in the first case, like this:

const arr = this.props.data.map((x) => <li>Hello {x.liftname}!</li>);

And you also have to define the key prop for every li item otherwise React'll drop a warning.