reactjs - Listing in one container different type of objects in react -

i have array of objects so:

[{   "message": {     "from": "one",     "body": "lorem"   } }, {   "message": {     "from": "two",     "body": "ipsum"   } }, {   "point": {     "topic": "lorem",   } }] 

how should render them objects in order , between appropriate or while message objects coming, inserted ul sequentially when point object comes, opens ul , adds point objects until again message objects coming , forth...

this how render code looks now, , don't know how make work out explained above:

render: function() {         var dmessages = sections.map(function(section, i) {             if (section.hasownproperty('message')){             return <message key={i} id={i} message={section.message} />;             }             if (section.hasownproperty('point')){             return <point key={i} id={i} point={section.point} />;             }         });          return (         <div classname="main">           <ul classname="message">             {dmessages}           </ul>         </div>);     } 

i couldn't twist mind solve json object stucture given in question adding container array message objects, whole issue seems resolvable in react way.

new structure:

[{ "dialog": [ {   "message": {     "from": "one",     "body": "lorem"   } }, {   "message": {     "from": "two",     "body": "ipsum"   } } ]}, {   "point": {     "topic": "lorem",   } }] 

new render function:

render: function() {         var debatemessages = sections.map(function(section, i) {             if (section.hasownproperty('dialog')){             return <dialog key={i} id={i} dialog={section.dialog} />;             }             if (section.hasownproperty('point')){             return <point key={i} id={i} point={section.point} />;           }         });          return (         <div classname="main">             {dmessages}         </div>);     }