React on rails:Iterating through an array of 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:

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

user3309314 · Accepted Answer · 2018-02-03 23:49:51Z

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.

answered Feb 3, 2018 at 23:49

user3309314

2,5412 gold badges21 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

React on rails:Iterating through an array of activerecord

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related