Cards of Native Base dynamically in react native and Firebase -

i have data extract firebase , did. it's displayed fine in listview. have display them in cards native base . code tried https://github.com/geekyants/nativebase/issues/347 error : undefined not object

import carditem from'./carditem' import {container, content, card, body, title} 'native-base'; export default class sixteentab extends component {      constructor(props) {         super(props);         this.itemsref = this.getref().child('docs/topics/topics_2016/');     }      componentdidmount() {         // start listening firebase updates         this.listenforitems(this.itemsref);     }     getref() {         return firebaseapp.database().ref();     }     listenforitems(itemsref) {         itemsref.on('value', (snap) => {             var items = [];             snap.foreach((child) => {                 items.push({                     title: child.val().title,                     _key: child.key                 });             });             this.setstate({                 items: items             });         });     }      render() {          return (             <view>                 <card dataarray={this.state.items}                       renderrow={(item) => this._renderitem(item)}>                 </card>             </view>         )     }      _renderitem(item) {          return (             <carditem item={item}/>         );     }   }  

carditem page

class carditem extends component {     render() {         return (             <view style={styles.listitem}>                 <text style={styles.litext}>{this.props.item.title}</text>              </view>         );     } } 

that's code used keep getting error image below --> idea please ps: items been extracted firebase database correctly, since can see them in console

after putting line this.state = { items: [] }; in constructor, warning

when trying second method of irfan , warning , nothing displayed in screen

that's final wrote , still not working

export default class sixteentab extends component {       constructor(props) {         super(props);         this.itemsref = this.getref().child('docs/topics/topics_2016/');         this.state = { items: null };      }     componentdidmount() {         this.listenforitems(this.itemsref);     }    componentwillmount() {             this.setstate({                  items:[]             });      }     getref() {         return firebaseapp.database().ref();     }     listenforitems(itemsref) {         itemsref.on('value', (snap) => {             var items = [];             snap.foreach((child) => {                 items.push({                     title: child.val().title,                     _key: child.key                 });             });                      this.setstate({                 items: items             });         });      }      render() {          return (             <view>                 <content>                     <card>                         {                             this.state.items.map((item,index)=>{                                 return (                                     <carditem key={index}>                                         <view>                                             <text>{item.title}</text>                                         </view>                                     </carditem>                                 )                             })                         }                     </card>                 </content>              </view>         )     }      _renderitem(item) {          return (              <listitem item={item}/>         );     } 

as per native base doc, dataarray , renderrow not support card component. should update render function.

render() {      return (        <container>          <content>             <card>                 {                      this.state.items.map((item, index)=>{                         return (                             <carditem key={index}>                                 <view>                                     <text>{item.title}</text>                                 </view>                             </carditem>                         )                     })                 }             </card>         </content>       </container>     ) }