How to include Rails Associated Model Data in React components
Tags: react, rails, javascript, ruby
Published: 2017-09-06 11:41:31

---
title: How to include Rails Associated Model Data in React components
published: true
description: How to work around a common React problem faced by Rails developers
tags: react, rails, javascript, ruby
canonical_url: https://learnetto.com/blog/how-to-include-rails-associated-model-data-in-react-components
---

![](https://thepracticaldev.s3.amazonaws.com/i/llktezafpkhw58bxc8st.png)  

_Originally published at [Learnetto.com](https://learnetto.com/blog/how-to-include-rails-associated-model-data-in-react-components)_.

When you start using React with Rails, one of the frustrating problems you quickly run into is trying to access associated model data from your React component.  

Let's say we areÂ [**building a chat app with Rails and React**](https://learnetto.com/tutorials/how-to-build-a-chat-app-with-rails-5-1-actioncable-and-react-js-part-1). We have three models, Chatroom, Message and User, which have the following relationships between them:  

```ruby
class Chatroom < ApplicationRecord
  has_many :messages, dependent: :destroy
end

class Message < ApplicationRecord
  belongs_to :chatroom
  belongs_to :user
end

class User < ApplicationRecord
  has_many :messages, dependent: :destroy
end
```

And we have aÂ [Message component](https://github.com/learnetto/reactchat/blob/master/client/app/bundles/Chatroom/components/Message.jsx)Â for rendering individual messages:  

```javascript
import React from 'react'

const Message = ({message}) => 

    {message.user.name}: {message.body}

export default Message
```

In addition to the message body we also want to display the user's name.  

If you're using a standard Rails ERB or Haml view template, you can simply write something like:  

```ruby
<%= @message.user.name %>
```

And that will just work even if you didn't include the user data in your database query in the controller.  

However,Â  unlike in a Rails view, if we callÂ `message.user.name`Â inside our React component without having specifically included that data in the prop sent to the component, it will throw an error.Â   

While a Rails template is actually able to call the model on-the-fly and get data it doesn't have, we don't have that luxury with React.  

We need to explicitly compose the JSON with the associated User model data because a React component can only access the JSON data we provide it.  

There are many ways to include the associated model data, including manually composing the JSON in the controller, defining a customÂ _as_json_Â methodÂ  on the model or usingÂ [ActiveModelSerializers](https://github.com/rails-api/active_model_serializers).  

One of the cleanest and most flexible ways is to useÂ [jbuilder](https://github.com/rails/jbuilder), which gives you a simple Domain Specific Language (DSL) for declaring JSON structures. The jbuilder gem comes included with Rails.  

In the example above, we can include our user data in the message JSON by defining it in aÂ [_message.json.jbuilder](https://github.com/learnetto/reactchat/blob/master/app/views/messages/_message.json.jbuilder)Â  file like this:  

```ruby
json.(message, :body, :id)
json.user do
  json.extract! message.user, :id, :name, :image
end
```

The jbuilder DSL is quite powerful and allows you to do all sorts of custom structuring of the data.  

For example, let's say we want to send all the messages in chronological order and user data for a particular chatroom to a Chatroom component. We can define theÂ [chatroom json](https://github.com/learnetto/reactchat/blob/master/app/views/chatrooms/_chatroom.json.jbuilder)Â like this:  

```ruby
json.(chatroom, :name, :id)
json.messages(chatroom.messages
                .sort_by{|m| m[:created_at]}) do |message|
  json.extract! message, :id, :body
  json.user do
    json.extract! message.user, :id, :name, :image
  end
end
```

Check out theÂ [jbuilder documentation](https://github.com/rails/jbuilder)Â to learn more about all its features.  

The full code of the Chat app isÂ [on Github](https://github.com/learnetto/reactchat)Â and there's a [live demo running here](https://reactrooms.herokuapp.com).

You can also learn how to build it yourself in this two-part video tutorial - Â [How to build a chat app with Rails 5.1 ActionCable and React.js Part 1](https://learnetto.com/tutorials/how-to-build-a-chat-app-with-rails-5-1-actioncable-and-react-js-part-1)Â andÂ [Part 2](https://learnetto.com/tutorials/how-to-build-a-chat-app-with-rails-5-1-actioncable-and-react-js-part-2).