javascript - Set Variable to Child Node in React -

i struggling appears simple issue. i'm working in react , trying set variable state passed.

here json passed

{   "id": "6",   "fname": "chris",   "lname": "baker",   "height": "6'2",   "meds": [     {       "medicationname": "acetaminophen",       "doseage": "take 2 daily food",       "numrefills": 2,       "refillexp": "2017-05-31t15:38:50.02z",       "firstprescribed": "2017-05-31t15:38:50.02z",       "wfid": "string"     }   ] } 

i able set variables @ parent level fine example....

class app extends reactcomponent {   ....   render() {     return (     ....     <overviewpane overview={this.state.patient}/>      ....     );    } } 

then in overview pane, able set fields based on data json expected. (see below)

class overviewpane extends reactcomponent {       ....       render() {         return (         ....         <td>{this.props.overview.map(function(p){return <label key={p.id}> first name: {p.fname}</td>          ....         );        }     } 

however not able meds try there following...

class app extends reactcomponent {   ....   render() {     return (     ....     <medicationspane meds={this.state.patient.meds[0]}/>      ....     );    } } 

and in medications pane...

class medicationspane extends react.component {   ...   render () {     return (       <list>             {this.props.meds.map(function(meds) {             return <listitem justify='between' separator='horizontal' key={meds.medicationname}>{meds.medicationname}</listitem>;           })}       </list>     );   } } 

when above error "cannot read prperty '0' of undefined. idea how can extract medications json?

i error "cannot read property '0' of undefined.

overviewpane component suggests this.state.patient array accessing meds this.state.patient.meds result result in undefined(unless there meds property on patient array) , error.

to avoid this, can do

class app extends reactcomponent {   ....   render() {     return (     ....     {this.state.patient.map(p => {       return (p.meds && p.meds.length > 0) ? <medicationspane meds={p.meds}/> : null;     })}      ....     );    } } 

secondly, sending medication details medicationspane overview , accessing them this.props.meds. change them same name.