Why does map() return an array with undefined values?
<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>