title: React JS with Rails - Accessing JSON data with URL
body: <p>I'm learning how to use React JS with my Rails app. 
  <em>Disclaimer: This is the first time I am messing around with JS!</em></p>
  
  <p>I'm following a talk by <a href="https://www.youtube.com/watch?v=kTSsZrub5iE" rel="nofollow">Michael Chan at Rails Conf</a>. Everything works beautifully until I hit the CommentsContainer part, where he fetches the comments data from a Rails route. I am trying to the same thing, except on a simple Songs controller (generated with a scaffold, having name and artist as the attribute).</p>
  
  <p>I am getting stuck at the part where he fetches this data with the path, I end up with a 500 error page when I try to run the code. I don't know how to debug my React code, since the browser console is just showing a 500 error. </p>
  
  <p>Here's my view, </p>
  
  <pre><code>&lt;%= react_component "SongsContainer", { songsPath: songs_path } %&gt;
  </code></pre>
  
  <p>And here's my React code, </p>
  
  <pre><code>var SongsContainer = React.createClass({
  componentWillMount(){
      this.fetchSongs();
      setInterval(this.fetchSongs, 1000);
  },
  
  fetchSongs() {
      $.getJSON(
          this.props.songsPath,
          (data) =&gt; this.setState({songs: data});
      );
  },
  
  getInitialState() {
      return { songs: [] };
  },
  
  render() {
      return &lt;Songs songs={this.state.songs} /&gt;;
  }
  });
  </code></pre>
  
  <p>Any help would greatly be appreciated! I'm just looking at this 500 page not knowing what to do.</p>
  
  <p>EDIT: Adding Server log</p>
  
  <pre><code>Started GET "/" for ::1 at 2015-08-11 18:19:30 +0530
  Processing by SongsController#index as HTML
    Rendered songs/index.html.erb within layouts/application (0.6ms)
  Completed 500 Internal Server Error in 373ms (ActiveRecord: 0.0ms)
  
  ActionView::Template::Error (SyntaxError: unknown: Unexpected token (10:41)):
      3: &lt;head&gt;
      4:   &lt;title&gt;Albums&lt;/title&gt;
      5:   &lt;%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' =&gt; true %&gt;
      6:   &lt;%= javascript_include_tag 'application', 'data-turbolinks-track' =&gt; true %&gt;
      7:   &lt;%= csrf_meta_tags %&gt;
      8: &lt;/head&gt;
      9: &lt;body&gt;
    app/views/layouts/application.html.erb:6:in `_app_views_layouts_application_html_erb___3071413699732960348_70238909518380'
  </code></pre>