How to Call a Function in One Class From Another Class in REACT

Question

I have the routerTest() function in a file called router.js , which has some HTML that needs to be rendered.

class Router extends Component {
  // Component constructor

constructor (props) {

// Call parent constructor
super(props)

// Set initial component state
  this.state = {
    line_of_business: 'Auto',
    displayingDropdown: true,
    open: false
  }
}

static routerTest () {
     return (
        <div>
          <Route exact path={paths.HOMEPAGE_PATH} render={() => (<Homepage {...this.state} />)} />
          <Route exact path={paths.GROUPS_PAGE_PATH} render={routeProps => (<GroupsPage {...routeProps} {...this.state} />)} />
          <Route exact path={paths.PROJECTS_PAGE_PATH} render={() => (<ProjectsPage {...this.state} />)} />
          <Route exact path={paths.METAGROUP_PAGE_PATH} render={routeProps => <MetagroupPage {...routeProps} {...this.state} />} />
          <Route path={paths.GROUP_PAGE_PATH} render={routeProps => (<GroupPage {...routeProps} {...this.state} />)} />
          <Route path={paths.PROJECT_PAGE_PATH} render={routeProps => (<ProjectPage {...routeProps} {...this.state} />)} />
          <Route exact path={paths.FAQS_PAGE_PATH} render={() => (<FAQSPage {...this.state} />)} />
          <Route exact path={paths.ABOUT_PAGE_PATH} render={() => (<AboutPage {...this.state} />)} />
        </div>
     )
  }
}

export default Router

In the other class that I would like to call this function, I imported the class with the following statement: import Router from './router.js' . In the render function of the other class , I have the following code:

// Render function

render () {
 return (
  <React.Fragment>
    <BrowserRouter>
      <div>      
        <NavigationBar {...this.state} handleChange={this.handleChange} setVisibility={this.setVisibility} openSearchBar={this.openSearchBar} />
        {Router.routerTest()}
      </div>
    </BrowserRouter>
  </React.Fragment> 
 )
}

How do I make this work? All I need to do is modulate my code so that the stuff in the Router class can be called in the other class. I need to have two classes or else the this.state stuff won't work.

Answer 1

To have a good project structure, make a helper function, helpers.jsx.

And export the function, like this.

export default function routerTest () {
     return (
        <div>
          <Route exact path={paths.HOMEPAGE_PATH} render={() => (<Homepage {...this.state} />)} />
          <Route exact path={paths.GROUPS_PAGE_PATH} render={routeProps => (<GroupsPage {...routeProps} {...this.state} />)} />
          <Route exact path={paths.PROJECTS_PAGE_PATH} render={() => (<ProjectsPage {...this.state} />)} />
          <Route exact path={paths.METAGROUP_PAGE_PATH} render={routeProps => <MetagroupPage {...routeProps} {...this.state} />} />
          <Route path={paths.GROUP_PAGE_PATH} render={routeProps => (<GroupPage {...routeProps} {...this.state} />)} />
          <Route path={paths.PROJECT_PAGE_PATH} render={routeProps => (<ProjectPage {...routeProps} {...this.state} />)} />
          <Route exact path={paths.FAQS_PAGE_PATH} render={() => (<FAQSPage {...this.state} />)} />
          <Route exact path={paths.ABOUT_PAGE_PATH} render={() => (<AboutPage {...this.state} />)} />
        </div>
     )
  }
}

And call it in the other components via

import { routerTest } from ./helpers`