title: React render has the correct data but won't render the JSX
body: <p>So, I believe this is a formatting issue OR I'm not clear about how the return works when dynamically building. </p>
  
  <p>The render function in Results works, if I replace the code with anythign else it renders where I want. Similarly, the console.log's in the Results function outputs the data correctly. There's no error, it just doesn't render the html and it doesn't hit the debugger in SynonymElement.</p>
  
  <p>What am I missing in here / what core concept am I misconstruing? </p>
  
  <p>(This is just an input form that takes a word, user hits submit, it returns an object with the word as a key and the value an array of synonynms. that get rendered in the ul)</p>
  
  <pre><code>'use strict'
  
  const Smithy = React.createClass({
    dsiplayName: "Smithy",
  
    getInitialState: function() {
      return { data: []};
    },
  
    handleSubmit: function(data) {
      $.get('/get-synonyms', { data: data.data }).done(function(data) {
        this.setState({ data: data})
      }.bind(this));
    },
  
    render: function() {
      return (
        &lt;div className="smithy"&gt;
          &lt;h1&gt;Craft Tweet&lt;/h1&gt;
          &lt;SmithyForm onSubmit={this.handleSubmit} /&gt;
          &lt;Results data={this.state.data} /&gt;
        &lt;/div&gt;
      )
    }
  })
  
  const SmithyForm = React.createClass({
    displayName: "SmithyForm",
  
    getInitialState: function() {
      return { placeholder: "tweet", value: "" };
    },
  
    handleChange: function(event) {
      this.setState({value: event.target.value});
    },
  
    handleSubmit: function(event) {
      event.preventDefault();
      var tweet = this.state.value.trim();
      this.props.onSubmit({ data: tweet });
  
      this.setState({value: ''});
    },
  
    render: function() {
      var placeholder = this.state.placeholder;
      var value = this.state.value;
      return (
        &lt;form className="smithyForm" onSubmit={this.handleSubmit}&gt;
          &lt;input type="text" placeholder={placeholder} value={value} onChange={this.handleChange} /&gt;
          &lt;button&gt;smithy&lt;/button&gt;
        &lt;/form&gt;
      );
    }
  })
  
  const SynonymElement = React.createClass({
    render: function() {
      debugger
      return (
          &lt;li&gt;{this.props.data}&lt;/li&gt;
      )
    }
  })
  
  const Results = React.createClass({
    render: function() {
      var words = this.props.data;
  
      return (
          &lt;div className="results"&gt;
           {
             Object.keys(words).map(function(value) {
               { console.log(value) }
            &lt;div className={value}&gt;
              &lt;ul&gt;
               {
                words[value].map(function(syn) {
                  { console.log(syn) }
                  return &lt;SynonymElement data={syn} /&gt;
                })
               }
              &lt;/ul&gt;
            &lt;/div&gt;
            })
           }
          &lt;/div&gt;
      )
    }
  })
  
  ReactDOM.render(&lt;Smithy /&gt;, document.getElementsByClassName('container')[0])
  </code></pre>