title: Why does map() return an array with undefined values?
body: <p>I am trying to build filter system. There is two filter menu. One is number of room and another is type of property. I have loaded json file from an api to space object. But when i try to pass all those spaces to SpaceFilterResults component my space array returns as [undefined, undefined]. </p>
  
  <p><strong>my code for filter</strong></p>
  
  <pre><code>class FilterSpace1 extends React.Component {
    constructor() {
      super();
  
      this.handleFormInput = this.handleFormInput.bind(this);
  
      this.state = {
        space:[],
        propertyType: 0,
        rooms: 0
      }
    }
  
    componentDidMount(){
          this.loadRoomFromServer();
      }
  
      loadRoomFromServer(){
          $.ajax({
              url:'/api/rentals/',
              dataType:'json',
              success: (data) =&gt; {
                  console.log('data',data);
                  this.setState({space: data.results});
                  console.log('success',this.state.space);
                },
                error: (xhr, status, err) =&gt; {
                  console.error(url, status, err.toString());
                }
              });
      }
  
    handleFormInput(propertyType, rooms) {
      this.setState({
        propertyType: propertyType,
        rooms: rooms
      })
    }
  
    render() {
     let space = _.map(this.state.space, (space,id) =&gt; {
      console.log('space is',space); // has an array as shown below
        &lt;SpaceFilterResults
              key = {id}
              space={space}
              propertyType={this.state.propertyType}
              rooms={this.state.rooms}
            /&gt;
     });
     console.log('space',space); //i get space [undefined, undefined] instead of all the spaces
  
      return (
        &lt;div className="filter"&gt;
          &lt;SpaceFilterMenu
            propertyType={this.state.propertyType}
            rooms={this.state.rooms}
            onFormInput={this.handleFormInput}
          /&gt;
          {space}
        &lt;/div&gt;
      )
    }
  }
  
   class SpaceFilterMenu extends React.Component {
     constructor() {
       super();
       this.handleChange = this.handleChange.bind(this);
     }
  
     handleChange() {
       this.props.onFormInput (
         this.refs.propertyTypeInput.value,
         this.refs.roomsInput.value
       );
     }
  
     render() {
       return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
             &lt;form className="filter-menu"&gt;
               &lt;label htmlFor="roomsInput"&gt;Number of rooms&lt;/label&gt;
                &lt;select id="roomsInput" ref="roomsInput" onChange={this.handleChange}&gt;
                   &lt;option value="1"&gt;1&lt;/option&gt;
                   &lt;option value="2"&gt;2&lt;/option&gt;
                   &lt;option value="3"&gt;3&lt;/option&gt;
                   &lt;option value="4"&gt;4&lt;/option&gt;
                   &lt;option value="5"&gt;5&lt;/option&gt;
                   &lt;option value="6"&gt;6&lt;/option&gt;
                &lt;/select&gt;
  
               &lt;label htmlFor="propertyTypeInput"&gt;propertyType&lt;/label&gt;
               &lt;select id="propertyTypeInput" ref="propertyTypeInput" onChange={this.handleChange}&gt;
                 &lt;option value="Appartment"&gt;Appartment&lt;/option&gt;
                 &lt;option value="House"&gt;House&lt;/option&gt;
                 &lt;option value="Shop"&gt;Shop&lt;/option&gt;
                 &lt;option value="Bunglow"&gt;Bunglow&lt;/option&gt;
               &lt;/select&gt;
             &lt;/form&gt;
            &lt;/div&gt;
        &lt;/div&gt;
       );
     }
   }
  
  class SpaceFilterResults extends React.Component {
    constructor() {
      super();
    }
  
    render() {
      var results = [];
  
     this.props.space.map((space) =&gt; {
      if(this.props.roomsInput===0){
        results.push(&lt;Space space = {space} /&gt;);
      }
      else if (space.roomsInput === this.props.roomsInput) {
          results.push(&lt;Space space={space} /&gt;);
        }
     });
  
      this.props.space.map((space) =&gt; {
        if (this.props.propertyType === 0 ) {
          results.push(&lt;Space space={space} /&gt;);
        }
        else if (space.propertyType === this.props.propertyType) {
          results.push(&lt;Space space={space} /&gt;);
        }
      });
  
      return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-md-4"&gt;
               &lt;div className="filter-results"&gt;
                  &lt;ul className="blocks blocks_3up"&gt;
                    {results}
                  &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      )
    }
  }
  
  class Space extends React.Component {
    constructor () {
      super();
    }
  
    render () {
      return (
        &lt;li&gt;
          &lt;div className="feature"&gt;
            &lt;div className="feature-hd"&gt;
              &lt;h2 class="hdg hdg_2"&gt;{this.props.space.listingName}&lt;/h2&gt;
            &lt;/div&gt;
            &lt;div className="feature-bd"&gt;
              &lt;p&gt;{this.props.space.room}&lt;/p&gt;
            &lt;/div&gt;
            &lt;div className="feature-ft"&gt;
              &lt;p&gt;{this.props.space.property}% rooms&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      )
    }
  }                            
  
  export default FilterSpace1;
  </code></pre>
  
  <p><strong>my json file looks like(/api/rentals/)</strong></p>
  
  <p><a href="https://i.stack.imgur.com/a3NfJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/a3NfJ.png" alt="enter image description here"></a></p>
  
  <p>the output of console.log('space is',space) gives space is Object {id: 1, renter: "admin", gallery: Array[2], ownerName: "tushant khatiwada", email: "tushant@gmail.com"…}</p>
  
  <p>What have i done wrong? How can i pass these all space data to SpaceFilterResults component?</p>