shopping list items

index.html.erb

<%= react_component('Lists', lists: @lists) %>

lists.jsx

var Lists = React.createClass({
  render: function() {
    return (
      <div>
        <h1>My shopping lists</h1>
        {this.props.lists.map(function(list) {
          return (
            <div key={list.id}>
              <h3>{list.name}</h3>
              <i>{list.description}</i>
              {list.items.map(function(item) {
                return (
                  <p key={item.id}>{item.name}</p>
                )
              })}
            </div>
          )
        })}
      </div>
    )
  }
});

lists_controller.rb

class ListsController < ApplicationController
  def index
    @lists = List.includes(:items).map { |list| list.as_json.merge({items: list.items.as_json}) }
  end
end