TypeError: Cannot read property 'map' of undefined

[oyerohabib]

App.js `import React, { Component } from 'react'; import Ninjas from './Ninjas';

class App extends Component { states ={ ninjas : [ { name:"oyero", age:20, belt:"Black", id: 1 }, { name:"habib", age:18, belt:"white", id: 2 }, { name:"ola", age:16, belt:"green", id: 3 } ] } render () { return(

My First React App

Welcome!!!

)

} }

export default App; ` Ninjas.js 'import React, { Component } from 'react';

class Ninjas extends Component { render () { const { ninjas } = this.props; const ninjaList = ninjas.map(ninja => { return (

Name: {ninja.name}

Age: {ninja.age}

Belt: {ninja.belt}

      )
  })
return(
  <div className="ninja-list">
    {ninjaList}
  </div>
)

} }

export default Ninjas
'