title: How to display data from Rails 5 API in React.js frontend app?
body: <p>I have set up an API with Rails, with a <code>http://localhost:3001/api/words</code> endpoint exposing the following data:</p>
  
  <pre><code>[{"id":1,"term":"Reach","definition":"Reach is the number of people who had any content from your Page or about your Page enter their screen.","example":"","author":"Loomly","credit":"https://www.loomly.com/","created_at":"2018-11-02T03:21:20.718Z","updated_at":"2018-11-02T03:21:20.718Z"},{"id":2,"term":"Emoji","definition":"A small digital image or icon used to express an idea, emotion, etc., in electronic communication","example":"","author":"Loomly","credit":"https://www.loomly.com/","created_at":"2018-11-02T03:23:50.595Z","updated_at":"2018-11-02T03:23:50.595Z"}]
  </code></pre>
  
  <p>I am now trying to simply display this data (ideally as an unordered list) in a React.js frontend application built with <code>Create React App</code>, and here is the content of my <code>App.js</code> file:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  class App extends Component {
    constructor () {
      super()
      this.state = {}
      this.getWords = this.getWords.bind(this)
      this.getWord = this.getWord.bind(this)
    }
  
    componentDidMount () {
      this.getWords()
    }
  
    fetch (endpoint) {
      return window.fetch(endpoint)
        .then(response =&gt; response.json())
        .catch(error =&gt; console.log(error))
    }
  
    getWords () {
      this.fetch('/api/words')
        .then(words =&gt; {
          if (words.length) {
            this.setState({words: words})
            this.getWord(words[0].id)
          } else {
            this.setState({words: []})
          }
        })
    }
  
    getWord (id) {
      this.fetch(`/api/words/${id}`)
        .then(word =&gt; this.setState({word: word}))
    }
  
    render () {
      let {words, word} = this.state
      return (
        &lt;div&gt;
          {Object.keys(words).map((key) =&gt; {
            return (
              &lt;div key={word.id}&gt;
                &lt;p&gt;{word.term}&lt;/p&gt;;
              &lt;/div&gt;
            )
          })}
        &lt;/div&gt;
      )
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I believe the problem is located in the following area of the code:</p>
  
  <pre><code>render () {
    let {words, word} = this.state
      return (
        &lt;div&gt;
          {Object.keys(words).map((key) =&gt; {
            return (
              &lt;div key={word.id}&gt;
                &lt;p&gt;{word.term}&lt;/p&gt;;
              &lt;/div&gt;
            )
          })}
        &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>I have tried to follow the steps explained in <a href="https://blog.heroku.com/a-rock-solid-modern-web-stack" rel="nofollow noreferrer">this tutorial</a>, as well as in <a href="https://medium.com/@bruno_boehm/reactjs-ruby-on-rails-api-heroku-app-2645c93f0814" rel="nofollow noreferrer">that other tutorial</a>, while keeping the layout of the page as simple as possible (no bells &amp; whistles from <code>semantic-ui-css</code>), and no matter what I try, I keep getting into of the following errors:</p>
  
  <ul>
  <li><code>TypeError: Cannot convert undefined or null to object</code></li>
  <li><code>Unexpected token, expected “,”</code></li>
  <li><code>Failed to compile: 'word' is not defined  no-undef</code></li>
  </ul>
  
  <p>The solution explained in <a href="https://kirstyburgoine.wordpress.com/2018/01/21/iterating-through-json-data-in-react/" rel="nofollow noreferrer">this article</a> led me to the code I have now, but there is something I am missing about the way to structure my React app: can you point me in the right direction?</p>