title: Using buttons within mapped details throws error "Nothing was returned from render"
body: <p>I am making a basic page in which I retrieve a bunch of details from my back end and displays to my front end by mapping it.</p>
  
  <p>This works completely fine however when I try and put a button in one (along with binding it and creating a handler) it keeps throwing below error.</p>
  
  <pre><code>Error: ManageWorkstations(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
  </code></pre>
  
  <p>I understand this is thrown when something is not returned but how come simply creating a button with functionally causes this?</p>
  
  <p>Below is my full code for the mapped object (with button with <code>onClick</code> still included).</p>
  
  <pre><code>import React from "react";
  import { Link } from "react-router-dom";
  import Popup from "reactjs-popup";
  import { Modal, Button } from "react-bootstrap";
  
  import AddWorkstation from "./UpdateUserWorkStationDetailsForm";
  class ManageWorkstations extends React.Component {
    constructor() {
      super();
  
      this.state = { AccountDetails: [] };
      this.handleDelete = this.handleDelete.bind(this);
    }
  
    // sets the questions form sql into state for questions
    getItems() {
      var user = window.localStorage.getItem("User");
      if (user) {
        fetch(`/profile-work-station-detailss/${user}`)
          .then(recordset =&gt; recordset.json())
          .then(results =&gt; {
            this.setState({ AccountDetails: results.recordset });
          });
      } else {
        alert("user not  set");
      }
    }
    //when the component mounts make the sql questions the
    componentDidMount() {
      this.setState({
        AccountDetails: this.getItems()
      });
    }
  
    handleDelete(e) {
      alert("pohfspuidhfg");
    }
  
    render() {
      try {
        return (
          &lt;&gt;
            &lt;h3 style={{ textAlign: "center" }}&gt;
              {" "}
              &lt;u&gt;Manage Work Stations&lt;/u&gt;
            &lt;/h3&gt;
            {this.state.AccountDetails ? (
              &lt;ul&gt;
                &lt;Link to="/profile"&gt;
                  &lt;button style={{ float: "left" }} className="btn btn-secondary"&gt;
                    Account Details
                  &lt;/button&gt;
                &lt;/Link&gt;
                &lt;button
                  style={{ float: "left" }}
                  className="btn btn-secondary"
                  disabled
                &gt;
                  Manage Work Stations
                &lt;/button&gt;
  
                &lt;DisplayAddWorkstation /&gt;
  
                &lt;br /&gt;
                &lt;br /&gt;
  
                {this.state.AccountDetails &amp;&amp;
                  this.state.AccountDetails.map(function(AccountDetails, index) {
                    return (
                      &lt;div className="jumbotron"&gt;
                        &lt;button
                          style={{ float: "right" }}
                          className="btn btn-secondary"
                          onClick={this.handleDelete}
                        &gt;
                          x
                        &lt;/button&gt;
                        &lt;h3&gt;Work Station&lt;/h3&gt;
  
                        &lt;li&gt;
                          Desk Location:
                          {AccountDetails.DeskLocation}
                        &lt;/li&gt;
  
                        &lt;li&gt;
                          Additional Information:
                          {AccountDetails.ExtraInformation}
                        &lt;/li&gt;
  
                        &lt;li&gt;
                          Date Added:
                          {AccountDetails.DateAdded}
                        &lt;/li&gt;
                      &lt;/div&gt;
                    );
                  })}
              &lt;/ul&gt;
            ) : (
              &lt;ul&gt;
                &lt;DisplayAddWorkstation /&gt;
                &lt;br /&gt;
                &lt;br /&gt;
                &lt;div className="jumbotron"&gt;
                  &lt;button
                    className="btn btn-secondary"
                    style={{ float: "right" }}
                  &gt;
                    X
                  &lt;/button&gt;
                  &lt;h3&gt;Work Station&lt;/h3&gt;
  
                  &lt;li&gt;
                    &lt;div&gt;Desk Location:&lt;/div&gt; Null
                  &lt;/li&gt;
  
                  &lt;li&gt;
                    &lt;div&gt;Additional Information:&lt;/div&gt;
                    Null
                  &lt;/li&gt;
  
                  &lt;li&gt;
                    &lt;div&gt; Date Added:&lt;/div&gt; Null
                  &lt;/li&gt;
                &lt;/div&gt;
              &lt;/ul&gt;
            )}
          &lt;/&gt;
        );
      } catch (e) {
        console.log(e);
      }
    }
  }
  
  
  </code></pre>
  
  <p>The button which causes the issue is within the second return using the handler <strong><code>handleDelete</code></strong></p>
  
  <p>Any help is much appreciated!</p>
  
  <p>EDIT </p>
  
  <p>This is the line of code which is causing the error </p>
  
  <pre><code>this.setState({ AccountDetails: results.recordset });
  </code></pre>
  
  <p>as soon as the onClick method is deleted (not bind or handler) the page loads again fine.</p>