javascript - Building a table in react -

i'm trying build simple table using react , running small issue.

here html:

<div>     <table>     <tbody id="content">       <tr>         <th>name</th>         <th>email</th>        </tr>     </tbody>   </table> </div> 

and react module:

var friendscontainer = react.createclass({     getinitialstate: function(){         return {             data: [                 {'name':'lorem ipsum', 'email':'email1@gmail.com'},                  {'name':'caveat broader', 'email':'email2@gmail.com'},                 {'name':'runther brigsby', 'email':'email3@gmail.com'}             ]         }     },      render: function(){         var listitems = this.state.data.map(function(person) {             return(                 <tr>                     <td>{person['name']}</td>                     <td>{person['email']}</td>                 </tr>             )         });         return (             {listitems}         )     } }); 

i keep getting error error: friendscontainer.render(): valid react element (or null) must returned. may have returned undefined, array or other invalid object.

what doing wrong?

your map call generates array must wrap in parent element (tbody in case) react component has have single root element. you'll have include table header there too, , optionally table tag:

    return (         <table>             <tbody id="content">                 <tr>                     <th>name</th>                     <th>email</th>                  </tr>                 {listitems}             </tbody>         </table>     ); 

next, alter map callback accepts 'i' (index) can assign unique keys tr's:

var listitems = this.state.data.map(function(person, i) {         return(             <tr key={i}>                 <td>{person['name']}</td>                 <td>{person['email']}</td>             </tr>         )     }); 

this should it.