React render имеет правильные данные, но не отображает JSX

Question

Итак, я считаю, что это проблема форматирования ИЛИ я не совсем понимаю, как работает возврат при динамическом построении.

Функция рендеринга в результатах работает, если я заменяю код любым, иначе он отображает там, где я хочу. Аналогично, console.log в функции Results выводит данные правильно. Нет ошибки, она просто не отображает html и не попадает в отладчик в SynonymElement.

Что мне недостает здесь/в какой основной концепции я неверно истолковываю?

(Это просто форма ввода, который принимает слово, пользователь нажимает отправить, он возвращает объект со словом как ключ и значение Массив synonynms., Которые получают оказанной в ул)

'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]) 

Answer 1

Возможно, возникнут некоторые другие осложняющие проблемы, но если все остальное правильно подключено, вам нужно вернуть результат функции, которую вы передаете на первую карту (по коллекции Object.keys(words)) так же, как у вас есть для более позднего map, иначе функция выполнено и ничего полезного не возвращается.

Возможно просто контратип loop inside React JSX

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