Third App.jsx Iteration (Add News Space)

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: '', 
      dappStorage: [], 
      newSpaceName: '', //*NEW* addition
   };
 }
 
 // ...functions removed for brevity
 
 // *NEW* functions to handle new space creation
 // name for new space
  handleNameChange = (name) => {
    this.setState({newSpaceName: name});
  }
 
 // call openSpace() with name for new space
  createNewSpace = async () => {
   const { inputKey, box } = this.state;
 
   try {
     await box.openSpace(inputKey);
   } catch(err) {
     console.log(err);
   }
 }
 
render() {
   const { isAppReady, ethAddress, box, 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
                 handleNameChange={this.handleNameChange}
                 createNewSpace={this.createNewSpace}
                 changeSelectedSpace={this.changeSelectedSpace}
               />
             )}
           />
         </Switch>
       </Fragment>)}
     </div>
   );
 }
}
 
export default withRouter(App);