reactjs - Rendering JavaScript Object in React -

i have react project set fetch object firebase database , render page. not know how render data properly.

the data fetching looks this:

{     "projects": {         "0": {             "title": "test",             "function": "test2"         },         "1": {             "title": "test3",             "function": "test4"         }     } } 

in chrome react debugger see this:

<div>     <message key="0" data={function: "test2", title: "test", key: "0"}>...</message>     <message key="1" data={function: "test4", title: "test3", key: "1"}>...</message> </div> 

but in elements view seeing 2 empty divs:

<div>     <div></div> == $0     <div></div> </div> 

currently passing <message key={index} data={message} /> message component containing {this.props.message}

edit: changed {this.props.data} since no message prop passed message component

refactoring code to: <div> key={index} data={message} </div> returns error

objects not valid react child (found: object keys {function, title, key}). if meant render collection of children, use array instead or wrap object using createfragment(object) react add-ons. check render method of projectlist.

seeing project items have keys not believe createfragment correct solution. firebase favors passing objects keys on arrays solutions given not seem work in situation. how can control how objects rendered on page?

my complete projectlist component looks this:

import react 'react'; import firebase 'firebase'; import _ 'lodash'; import message './message'  class projectlist extends react.component {   constructor(props){     super(props);     this.state = {       messages: {}     };      this.firebaseref = firebase.database().ref('projects');     this.firebaseref.on("child_added", (msg)=> {       if(this.state.messages[msg.key]){         return;       }        let msgval = msg.val();       msgval.key = msg.key;       this.state.messages[msgval.key] = msgval;       this.setstate({messages: this.state.messages});     });   }     render(){     var messagenodes = _.values(this.state.messages).map((message, index)=> {       return (         <message key={index} data={message} />       );     });      return (       <div>           {messagenodes}       </div>     );   } }  export default projectlist; 

thanks!

edit: changed message component render {this.props.data} message component receives no message prop.

change message render method to:

render() {   return <div>{this.props.data}</div> }