Primary component that renders child components for Apartments view

Container.js

import React, { Component } from 'react';
import Room from './Room';
import Bed from './Bed'
import Student from './Student';
import ApartmentListFilter from "../ApartmentListFilter";
import "../../styles/dndbed.scss";
import "../../styles/housingcontainer.scss";
import { connect } from "react-redux"
import { getStudents } from "../../actions/action_student"
import { getApartments, getRooms } from "../../actions/action_apartments"
import moment from "moment"
import { Panel, Accordion } from "react-bootstrap";
import { _pick, _map } from 'lodash';


class Container extends Component {

  constructor(props) {
    super(props)
    this.state = {
      open: false,
      bedList: '',
      over_21: false,
      preferred_gender: "",
      campus_id: 0
    }

  }

   //
   // Get data
   //
  componentDidMount() {
    this.props.dispatch(getStudents())
    this.props.dispatch(getApartments())
    this.props.dispatch(getRooms())
  }

  handleChange(type, val) {
    this.setState({
      [type]: val
    })
  }

  render() {
    // Shorten variables for drag and drop
    const { boxes, dustbins } = this.state;
    let state = this.state;
    
    //
    // Create list of all students who don't have a room
    // And populate Student component with their data
    //
    let students = this.props.all.filter(student => student.room_id == null).map( studentInfo => (
      <Student  name={studentInfo.name}
                eligibility={studentInfo.eligibility}
                age={moment().diff(studentInfo.dob, 'years', false)}
                gender={studentInfo.gender}
                id={studentInfo.id}
                room_id={studentInfo.room_id}
               />
    ))

    //
    // Grab important information for students
    // and place in new object
    //
    let studentRoomInfo = _.map(this.props.all, function(currentObj) {
      return _.pick(currentObj, "id", "room_id", "first_name", "last_name")
    })
 
    let roomData = this.props.rooms.rooms;

    //
    // Filter through apartments
    //
    let apartments = this.props.apartments;
    if (apartments[0])
      ["over_21", "preferred_gender", "campus_id"].forEach(filterBy => {
        let filterValue = state[filterBy];
        if (filterValue) {
          apartments = apartments.filter(apartment => {
            return apartment[filterBy] == filterValue});
        }
      })
    
    let apartmentsList = [];
    if (apartments[0] && roomData) {
      //
      // Create list of apartments
      //
    apartmentsList = apartments.map( apartment => {
      //
      // Create list of rooms for each apartment
      //
    let displayRooms = roomData.filter(function(room) { return (room.apartment_id == apartment.id) })
                               .map(room => (<li><Room key={room.id}
                                                       number_of_beds={room.number_of_beds}
                                                       room_id={room.id}
                                                       all_student_info={studentRoomInfo}>
                                             </li>))

                                 let headerMsg = "Apt " + {apartment.apartment_number}

                                  return (
                                      <Panel header={headerMsg}
                                             eventKey={apartment.id}
                                             className="apt-holder">
                                          <ul className="apt-ul">
                                            {displayRooms}
                                          </ul>
                                      </Panel>)})
    return (
        <div>
          <ApartmentListFilter over_21={ this.state.over_21 } 
                               preferred_gender={ this.state.gender } 
                               campus_id={ this.state.campus_id} 
                               handleChange={ this.handleChange.bind(this) }/>
          <Accordion className="apartment-container">
            {apartmentsList}
          </Accordion>
          <div className="housing-container">
            {students}
          </div>
        </div>
    )
  }
}


function mapStateToProps(state) {
  return {
    all: state.students.all,
    apartments: state.apartments.all,
    rooms: state.rooms
  }
}
export default connect(mapStateToProps)(Container)