CODEWITHSUNDEEP
ruby-on-railsreactjscomponents
MDekker
MDekker

Reputation: 443

React component is not rendering activerecord relation in Rails view

I am trying out react and Rails. I have a very simple rails app with one Model called "Story".

I installed the react-rails gem:

 gem 'react-rails', '~> 1.0'

and followed the suggested installation procedure.

I have scaffolded the story model and made the the 'new' method to root in my routes.rb file. All works fine.

I have added a @stories instance to my 'new' method in storiescontroller that holds all records from the database:

# GET /stories/new -- file: stories_controller.rb
  def new
  @stories = Story.all
  @story = Story.new
end

and in my view I added this line of code

#                   -- file: new.html.erb
<%= react_component('Story', { :data => @stories }) %>

and in my javascript file I have this code:

#                   -- file:assets/javascripts/components/story.js.jsx
 var Story = React.createClass({

 displayName: 'Story',

 propTypes: {
  title: React.PropTypes.string,
  description: React.PropTypes.node
  },


  render: function() {
    return (
           <div>
             <div>Title: {this.props.title}</div>
             <div>Description: {this.props.description}</div>
           </div>
    );
   }
 });

I thought this should work. But it don't. When I replace the code in the view page with this:

<%= react_component('Story', { :title => "my title", :description=> "my description" }) %>

Then both the 'title' and 'description' are rendered correctly.

It seems that the @stories instance from my view is not parsed correctly to the react component. Then I tried the old-fashion way with 

<% @stories.each do |story|  %>
    <div class="panel">
      <h3><%= story.title %></h3>
      <p><%= story.description %></p>
    </div>
  <% end %>

and that works OK. So no problems with the @stories instance. It holds all records and is accessible form the new.htm.erb file.

I am loading the react files after turbolinks in application.js. And settled with this code

#                   -- file: application.js

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require react
//= require react_ujs
//= require components
//= require_tree .

$(function(){ $(document).foundation(); });

I can't find the answer on the internet so i hope someone can help me with my first attempt to get react running in my rails environment.

Upvotes: 1

Views: 1510

Answers (1)

Henrik Andersson
Henrik Andersson

Reputation: 47172

If @stories is an array and passed like this

<%= react_component('Story', { :data => @stories }) %>

then that array will be available on a prop named data, ie., this.props.data will be the array of stories. There is no magic unpacking going on here which will allow you to access each storys properties.

<% @stories.each do |story|  %>
    <%= react_component('Story', { :story => story }) %>
<% end %>

will allow you to access your data like so this.props.story.title and also render a div for each story you have in your array

Upvotes: 1

Related Questions