Second App.jsx Iteration (Dropdown Selector)

App.jsx

// src/App.jsx
 
// ...imports removed for brevity
 
class App extends Component {
 constructor(props) {
   super(props);
   this.state = {
     box: null,
     ethAddress: '',
     userProfile: {},
     isAppReady: false,
     selectedSpace: '', // *NEW* addition
     dappStorage: [], // *NEW* addition
   };
 }
 
 // ...functions removed for brevity
 
 // *NEW* change space that actions are being taken on
 changeSelectedSpace = async (event) => {
   const { box } = this.state;
 
   const selectedSpace = event.target.value;
 
   const dappStorage = await box.openSpace(selectedSpace);
 
   await this.setState({ selectedSpace, dappStorage });
 }
 
render() {
   const { isAppReady, ethAddress, spaceOptions, selectedSpace } = this.state;
 
   return (
     <div className='App'>
       {isAppReady && (<Fragment>
         <Switch>
    	    {/* Auth route removed for brevity */}
           <Route
             exact
             path='/main'
             render={() => (
               <MainPage
                 //state
                 ethAddress={ethAddress}
                 spaceOptions={spaceOptions}
                 selectedSpace={selectedSpace}
                
                 //functions
                 changeSelectedSpace={this.changeSelectedSpace}
               />
             )}
           />
         </Switch>
       </Fragment>)}
     </div>
   );
 }
}
 
export default withRouter(App);