Communication between React.js and Rails Model

Question

What i want to do ?

I wan't to show on my rails view files data with react.js component from my rails models.

What i have ?

I have installed these gems

rails-admin
react-rails 

What i did ?

I created a new rails project. I installed react-rails gem and rails-admin gem created new controller with following types

rails g scaffold Post title:string body:text

and i can add from rails admin posts all is okey.

my controller looking like :

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]

  # GET /posts
  # GET /posts.json
  def index
    @posts = Post.all
  end

  # GET /posts/1
  # GET /posts/1.json
  def show
    @post = Post.find(params[:id])
  end

  # GET /posts/new
  def new
    @post = Post.new
  end 

and here is my views/posts/index.html.erb file

<%= react_component('PostList', {name: raw(render(template: 'posts/index', formats: :json)) }) %>

here is views/posts/index.json.jbuilder file

json.array!(@posts) do |post|
  json.extract! post, :id, :title, :body
  json.url post_url(post, format: :json)
end

here is views/posts/show.json.jbuilder file

json.extract! @post, :id, :title, :body, :created_at, :updated_at

here is my react component file assets/javascripts/components/post_list.js.jsx

var PostList = React.createClass({

  render: function() {  
    return (
      <div>
        {JSON.parse(this.props.posts).map(function(post) { 
          return <Post key={post.id} {... post}  />;
        })}
      </div>
      );
  }
});

So i can't understand where is i'm wrong. I can't get data from json to index.html.erb. How can i do that? Please help i'm stuck and i can't find nothing understandable on internet

Answer 1

I made three changes to make it work:

1. index.html.erb

    <%= react_component('PostList', render(template: 'posts/index', formats: :json) ) %> 

2. views/posts/index.json.jbuilder file

    json.posts(@posts) do |post| json.extract! post, :id, :title, :body json.url post_url(post, format: :json) end 

   as per instructed in the documentation ; ie. "make sure your JSON is a stringified hash, not an array".

3. remove JSON.parse function in the PostList component render function, to this:

    var PostList = React.createClass({ render: function() { return ( <div> {this.props.posts.map(function(post) { return <Post key={post.id} {... post} />; })} </div> ); } }); 

Answer 2

this method is working.

index.html.erb

<% @news.order("id DESC").each do |news|  %>
                <%= react_component('News', { :news => news }) %>
                <% end %>

news.js.jsx

var News = React.createClass({

 displayName: 'News',

  render: function() {
    return (
           <div>
             <h4>{this.props.news.title}</h4>
             <p>{this.props.news.body}</p>
           </div>
    );
   }
 }); 

index.json.jbuilder

json.array!(@news) do |news|
  json.extract! news, :id, :title, :body
  json.url news_url(news, format: :json)
end