title: Convert object to array with Lodash _.map and use map function in React
body: <p>I encountered an issue when I used <code>map</code> function in React to iterate data because the data is object. So I tried to use <code>_.map</code> function of Lodash to convert from object to array. Then I want to iterate the data using <code>map</code>function.</p>
  
  <p>It didn't work as I had expected and I'm wondering what is the problem.</p>
  
  <p>Should it be working? It is a ok to use <code>_.map</code> to iterate in React?</p>
  
  <p>The data structure 
  <a href="https://i.stack.imgur.com/qRCN6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qRCN6.jpg" alt="enter image description here"></a></p>
  
  <p>The code</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from "react-redux";
  import { bindActionCreators } from "redux";
  import { addData } from "../actions/index";
  import _ from "lodash";
  
  class List extends Component{
      componentDidMount(){
          this.props.addData()
      }
      render(){
          let item;
          if(this.props.data) {
            item = _.map(this.props.data, data =&gt; {
  
           return (
               &lt;li key={data.id}&gt;
               {data.title}
               &lt;/li&gt;
           /* this returns empty data. Only bullet button appears.
           In console, it says [Each child in an array or iterator should have a unique "key" prop.]
           Even though I added a key value. */
           )
       })
      }   
  
  
  return(
      &lt;div&gt;{item}&lt;/div&gt;
  )
  }
  }
  
  function mapStateToProps(state){
      return {
      data : state.data
  }
  }
  
  export default connect(mapStateToProps, {addData})(Search);
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>To debug, did a <code>console.log(this.props.data)</code>, which produced this output: </p>
  
  <pre><code>Object { data: Array[100] }
  </code></pre>