React render has the correct data but won't render the JSX

Question

So, I believe this is a formatting issue OR I'm not clear about how the return works when dynamically building.

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.

What am I missing in here / what core concept am I misconstruing?

(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)

'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 (
      <div className="smithy">
        <h1>Craft Tweet</h1>
        <SmithyForm onSubmit={this.handleSubmit} />
        <Results data={this.state.data} />
      </div>
    )
  }
})

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 (
      <form className="smithyForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder={placeholder} value={value} onChange={this.handleChange} />
        <button>smithy</button>
      </form>
    );
  }
})

const SynonymElement = React.createClass({
  render: function() {
    debugger
    return (
        <li>{this.props.data}</li>
    )
  }
})

const Results = React.createClass({
  render: function() {
    var words = this.props.data;

    return (
        <div className="results">
         {
           Object.keys(words).map(function(value) {
             { console.log(value) }
          <div className={value}>
            <ul>
             {
              words[value].map(function(syn) {
                { console.log(syn) }
                return <SynonymElement data={syn} />
              })
             }
            </ul>
          </div>
          })
         }
        </div>
    )
  }
})

ReactDOM.render(<Smithy />, document.getElementsByClassName('container')[0])

Where is the `Smithy` component defined? – adriantoine Jan 15 '16 at 17:55 — adriantoine, Jan 15 '16 at 17:55
@Alshten Added the full code above – colintherobot Jan 15 '16 at 18:05 — colintherobot, Jan 15 '16 at 18:05
`{ console.log(syn) }` does not need the braces. – ryan0319 Jan 15 '16 at 18:16 — ryan0319, Jan 15 '16 at 18:16

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

Might have some other complicating issues but assuming everything else is wired up correctly, you need to return the result of the function you pass into the first map (over the collection Object.keys(words)) just as you have for the later map otherwise the function is executed and nothing useful is returned.

Possibly just a dupe of loop inside React JSX

return (
  <div className="results">
  {
    Object.keys(words).map(function(value) {
      return (   // <-- this 
        <div className={value}>

edited May 23 '17 at 12:15

Community

1
1

answered Jan 15 '16 at 18:11

mczepiel

711
3
12

That was it exactly. Is it kosher to do that double return? The thing that's throwing me about React the most is that every time I get something working it feels like I'm just kludging it together and maybe not doing it the way React actually wants. – colintherobot Jan 15 '16 at 18:23
This isn't a React specific behavior. You have nested a function inside another, it's ok. There are performance considerations, but only when it becomes a problem. JSX does make it a bit more complicated to see at a glance only because there's a lot of markup. (The logging wasn't aiding readability) You can always split the functions themselves out for readability as either extra functions or as self-contained components. – mczepiel Jan 15 '16 at 18:37
In short, you're not "double returning", you have two returns because there are two functions, one for each map callback function (inside the third that is `render`) – mczepiel Jan 15 '16 at 18:39

React render has the correct data but won't render the JSX

1 Answers1