title: same content is shown multiple time
body: <p>I am trying to develop filter system using reactjs and rest api. There are two filtering option one is no of room and another is type of property. I have used onChange event whenever user selects say property type home then only spaces with property home type will be listed and if user again selects number of room as 4 then the user will get the space with property type home of 4 rooms.The problem is i am getting same space multiple times. There are only two spaces listingEditNow and Tushant Khatiwada but they are displayed for more 2 times. </p>
  
  <p>What might be the problem?</p>
  
  <p>Here's my code with json file(/api/rentals/)</p>
  
  <pre><code>class FilterSpace1 extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        space:[],
        filter:false,
        propertyType: '',
        rooms: ''
      }
      this.handleFormInput = this.handleFormInput.bind(this);
    }
  
    componentWillMount(){
          this.loadRoomFromServer();
      }
  
      loadRoomFromServer(){
          $.ajax({
              url:'/api/rentals/',
              dataType:'json',
              success: (data) =&gt; {
                  this.setState({space: data.results});
                },
                error: (xhr, status, err) =&gt; {
                  console.error(url, status, err.toString());
                }
              });
      }
  
    handleFormInput(propertyType, rooms) {
      this.setState({
        propertyType: propertyType,
        rooms: rooms,
        filter: !this.state.filter
      })
    }
  
    render() {
     let space = _.map(this.state.space, (space,id) =&gt; {
      return(
              &lt;SpaceFilterResults
              key = {space.id}
              space={this.state.space}
              filter={this.state.filter}
              propertyType={this.state.propertyType}
              rooms={this.state.rooms}
            /&gt;
        );
  
     });
      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() {
      console.log('ref',this.refs.propertyTypeInput.value);
      console.log('ref',this.refs.roomsInput.value);
       this.props.onFormInput (
         this.refs.propertyTypeInput.value,
         this.refs.roomsInput.value
       );
     }
  
     render() {
       return (
        &lt;div className="container filterMenu"&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;option value="7"&gt;7&lt;/option&gt;
                   &lt;option value="8"&gt;8&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() {
      let results = [];
     if(this.props.filter === false){ 
        this.props.space.map((space) =&gt; { 
          results.push(&lt;Space space={space} /&gt;) 
        }); 
        } 
        else { 
         this.props.space.map((space) =&gt; { 
          console.log('space.property',space.property);
          if (space.rooms === this.props.rooms || space.property === this.props.propertyType){ 
            results.push(&lt;Space space={space} /&gt;) 
        } 
  
    });
  }
  
      return (
  
               &lt;div className="filter-results"&gt;
                  &lt;ul className="blocks blocks_3up"&gt;
                    {results}
                  &lt;/ul&gt;
                &lt;/div&gt;
      )
    }
  }
  
  class Space extends React.Component {
    constructor () {
      super();
    }
  
    render () {
      return (
        &lt;li className="col-md-4 filterResults"&gt;
                &lt;div className="feature-hd"&gt;
                  &lt;h2 className="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}&lt;/p&gt;
                &lt;/div&gt;
        &lt;/li&gt;
      )
    }
  }   
  
  export default FilterSpace1;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/zcc8a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zcc8a.png" alt="enter image description here"></a></p>
  
  <p>There are only 2 spaces(listingListEditedNow and Tushant Khatiwada) but those 2 spaces are shown twice. </p>
  
  <p><a href="https://i.stack.imgur.com/yPzZD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yPzZD.png" alt="enter image description here"></a></p>