map is not defined React JS

i have a problem maping the component state. i have this export:

export default[
  {
    'menu': 'Usuarios',
    'url' : '',
    'items':[
      {
        'title': 'Nuevo usuario',
        'destino' : '/DashBoard'
      },
      {
        'title': 'Actualizar datos',
        'destino' : '/DashBoard'
      }
    ]
},

{

‘menu’: ‘Socios’,

‘url’ : ‘’,

‘items’:[

{

‘title’: ‘Membrecias’,

‘destino’ : ‘/DashBoard’

}

]
},

{

‘menu’: ‘Clases’,

‘url’ : ‘’,

‘items’:[

{

‘title’: ‘Nuevo usuario’,

‘destino’ : ‘/DashBoard’

}

]
},

{

‘menu’: ‘Productos’,

‘url’ : ‘’,

‘items’:[

{

‘title’: ‘Nuevo usuario’,

‘destino’ : ‘/DashBoard’

}

]
},

{

‘menu’: ‘Compras’,

‘url’ : ‘’,

‘items’:[

{

‘title’: ‘Nuevo usuario’,

‘destino’ : ‘/DashBoard’

}

]
},

{

‘menu’: ‘Ventas’,

‘url’ : ‘’,

‘items’:[

{

‘title’: ‘Nuevo usuario’,

‘destino’ : ‘/DashBoard’

}

]
},

{

‘menu’: ‘Estadisticas’,

‘url’:‘/Dashboard’

},

{

‘menu’: ‘Reportes’,

‘url’: ‘/DashBoard’

}

]

The menu routes is not defined so assign ‘/ DashBoard’ to all but it is not a problem.

I have the problem when I try to map the state of the component in the following way:

// Dependencies

import React, {Component} from ‘react’;

//Data

import mdata from ‘…/…/Data/Settings/MenuDash’;

class DropTownMenu extends Component{

constructor(){

super();

this.state={

data: mdata,

}

}

render(){
return(
  <div className='DropTownMenu'>
    {this.state.data.map((todo,i) =>
      <div key={i}>
      <span>{todo.menu}</span>
      <span>{todo.url}</span>
      <span>{todo.items.map((todo, i)=><span key={i}>{todo.title}</span>)}</span>
  </div>

  )}

  </div>
);

}

}

export default DropTownMenu;

use the ‘span’ tag just to test this I have to implement it as a list, but I’ll take care of that. the question is that this does not give me errors in console but if in the browser, those errors are the following: 

my english is not very good apologies for that.

#javascript #reactjs