Source: components/LocationPicker.js

import React, {Component} from 'react';
import LocationPickerSelect from "./LocationPickerSelect";
import * as apiCalls from "../apiCalls/apiCalls";

/**
 * component allowing to pick building, room and show-case using select boxes
 */
class LocationPicker extends Component {

    /**
     * current state
     */
    state = {
        buildingId: this.props.buildingId ? this.props.buildingId : null,
        roomId: this.props.roomId ? this.props.roomId : null,
        showcaseId: this.props.showcaseId ? this.props.showcaseId : null,
    }

    /**
     * function for getting all rooms depending on building in state
     * @returns {Promise<AxiosResponse<*>>} promise
     */
    fetchRooms = () => {
        return apiCalls.getRooms(this.state.buildingId);
    }

    /**
     * function for getting all showcases depending on room in state
     * @returns {Promise<AxiosResponse<*>>} promise
     */
    fetchShowcases = () => {
        return apiCalls.getShowcases(this.state.roomId);
    }

    /**
     * Reacts on building change
     * @param newVal new building id
     */
    onBuildingChange = newVal => {
        if(newVal !== this.state.buildingId) {
            // update state with new val
            this.setState({buildingId: newVal, roomId: null, showcaseId: null});
            // update upper component
            this.props.update(newVal, null, null);
        }
    }

    /**
     * Reacts on room change
     * @param newVal new room id
     */
    onRoomChange = newVal => {
        if(newVal !== this.state.roomId) {
            // update state with new val
            this.setState({roomId: newVal, showcaseId: null});
            // update upper component
            this.props.update(this.state.buildingId, newVal, null);
        }
    }

    /**
     * Reacts on showcase change
     * @param newVal new showcase id
     */
    onShowcaseChange = newVal => {
        if(newVal !== this.state.roomId) {
            // update state with new val
            this.setState({showcaseId: newVal});
            // update upper component
            this.props.update(this.state.buildingId, this.state.roomId, newVal);
        }
    }

    /**
     * renders component to pick location
     * @returns {JSX.Element} component to pick location
     */
    render() {
        const {buildingId, roomId, showcaseId} = this.state;

        return (
            <>
                <LocationPickerSelect currValue={buildingId} label="Building" idName="buildingId" fetch={apiCalls.getBuildings} onChange={this.onBuildingChange} />
                {buildingId && <LocationPickerSelect key={buildingId} currValue={roomId} label="Room" idName="roomId" fetch={this.fetchRooms} onChange={this.onRoomChange} />}
                {roomId && <LocationPickerSelect key={roomId} currValue={showcaseId} label="Show-case" idName="showcaseId" fetch={this.fetchShowcases} onChange={this.onShowcaseChange} />}
            </>
        );
    }
}

export default LocationPicker;