javascript - Array.prototype.map returns undefined -

i trying render array collection of <li> elements. using react es2015 syntax , babel translation.

the array stored in object , can accessed this.props.technologies, when write this:

<ul classname="categories">     { this.props.technologies } </ul> 

i following html output:

<ul class="categories" is="null">     coffeescript     atom </ul> 

but, when try this:

<ul classname="categories"> {   this.props.technologies.map(c => {     return `<li>${c}</li>`   }) } 

i error saying : this.props.technologies undefined

i tried doing this:

this.props.technologies.map(c => c) 

just check if map working, still results in same error.

edit

i tried testing it, , found occurs when fetch data using ajax.

edit 2 providing mvce

import react, {component} 'react' import axios 'axios'  class header extends component {    constructor(props) {   super(props)   this.state = {}   }    render() {     return(       <ul>       {         this.props.technologies.map(c => <li>{c}</li>)       }       </ul>     )   } }  class details extends component {    constructor(props) {     super(props)     this.state={}   }    componentwillmount(){     axios.get(`/static/dummydata/test.json`)       .then(res => this.setstate(res.data))       .catch(res=>console.log(res))   }    render(){     return(       <header technologies={this.state.technologies}/>     )   } }  export {header, details} 

the data in test.json is:

{   "technologies": [     "coffeescript",     "js"   ] } 

the problem has nothing map. this.props doesn't have property "technologies". @ whatever code supposed assign technologies array this.props (i'm not familiar react).