React/JSX - map property not found in object

Question

Im new to react framework. I'm facing an issue and need some help here.

An API call will result in an object which has several object rows. I wanted to use map on that object to render the div's.

export default class SearchResult extends Component {

   static propTypes = {
       courses:React.PropTypes.object, 
   }

  render() {

     ....
     this.props.courses.map( entity => renderEntity(entity));
     ...
  }
}

I'm having an error stating map is not a property. After searching in google i found object doesnt have map property. Only arrays have it.

Can some one help me 1) How do i get map functionality / equivalent. All I want to do is render a set of html tags for every element in the object. this is to develop a search result. 2) Can I convert object to arrays. Is that required. 3) if (this.props.courses) is always turning out to be true because it has proto initialised. In that case how will I check if courses really has data. courses.length etc didnt work as it doesnt have any property of length nor it is an array.

Object console log output Note :- this is my first question in stackoverflow. So kindly ignore if you find any error.

Thanks in advance for help. Sesh

Answer 1

More than a React problem this is a pure JS one. If your need is to cycle through the values of the object, then something like this should work just fine:

Object.keys(this.props.courses).map(course => renderEntity(this.props.courses[course]))

As a suggestion for future issues like this, always start looking here, in this specific case this, is the ideal like for your problem.