title: Using React.js to show a list
body: <p>I am trying to write a very simple react program that displays a button to the user and when clicked, it calls an API and displays the results as a list.</p>
  
  <p>I am at the point where I can press the button and debugging I see the data is pulled and manipulated to the way I need but it is not being displayed on the screen. Here is the work I have done so far;</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  class Button extends React.Component {
    constructor(props){
    super(props);
    this.state = {
      users : []
    };
  }
  
  handleClick() {
    fetch("http://localhost:8080/api/user/")
    .then(results =&gt; {
      return results.json();
    })
    .then(data =&gt; {
      let users = data.map((user) =&gt; {
        console.log("user - ", user.name);
        return (
          &lt;li key={user.id}&gt;{user.name}&lt;/li&gt;
        );
      })
      // this.setState({users: users});
      return (
        &lt;ol&gt;
          {users}
        &lt;/ol&gt;
      );
    })
    .catch(function(error) {
      console.log(error);
    });
  }
  
  render(){
      return (
        &lt;button onClick={this.handleClick}&gt;Get All Users&lt;/button&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Button /&gt;, document.getElementById("root"));
  </code></pre>