javascript - Invariant Violation in React Render OR the proper way to iterate and return in React -

I am running into problems with constant renders in the {{ This.props.answers.map (function (reply, i) {return (

{answer.text} );}, this)}}}); Var QuizTaking = React.createClass ({componentDidMount: function () {}, render: function () {return (

div classname = 'submit' & gt; & lt; / div & gt; & lt; / div & gt;

)}})

me Ornamental violation: Answer: (): A valid response component should be returned. You can undefined, return an array or any other invalid object. Errors However, it works every time:

  / ** @ jsx response DOM * / var TestIndex = React.createClass ({propTypes: {}, loadTest: function (i) {window.location .replace (this.props.tests [i] .url.replace (".json", "/ take "), Render: function () {return (
 
 {this.props.tests.map (function (Test, i) {return (
  {test.title} & Lt; click on the button Click = {this.loadTest.bind (test, i)} key = {i} type = "button" className = "startbutton paper-button gt; & gt; & lt; / div & gt; & Lt; / div & gt;);}, this)} & lt; / gt; & quot; Press the button & gt; start the trial   
 )}});  

I should understand what is happening here, and maybe this is the right way to do it.

You can not return many elements (like the Orange returned by the mapp function) from the Render function. Also, if you are missing a return statement, try it:

var response = response .createclass ({componentDidMount: function () {}, render: function () {return (& lt ; Div> gt; {this.props.answers.map (function (answer, i) {return (

gt; & gt; ; Input type = "checkbox" value = {answer.id} /> {answer text} );}, it)}