ReactJS Call Function of another Component react-router

Question

I have implemented an app which uses react-router to handle the routes in my web-app. I want to trigger the function logintoggle which is on the Header.js component from a function from the Hompage.js component. The App.js has all the routes in one file.

Can anyone explain to me how this can be achieved with small code snippet?

App.js

render() {
        const { location } = this.props;
        return (
          <IntlProvider
              locale="a"
              messages="s"
          >
             <Fragment>

                  <div>

                    <Headers />
                      <Switch>
                        <Route exact path="/women" component={HomePage} />
                     </Switch>
                    </div>

             </Fragment>
            </IntlProvider>
        );
      }
    }
   export default App;

Header

class Header extends React.Component {
                constructor(props) {

                    super(props);
        }

         logintoggle(tab) {
                if (this.state.activeTab !== tab) {
                    this.setState({
                        activeTab: tab
                    });
                }
            }

    }

Homepage.js

class CheckOut extends Component {

    constructor(props) {
        super(props);

    }
}

teimurjan · Accepted Answer · 2019-10-12 11:43:15Z

When you need to have a shared state among the components React.Context API is what you need. It allows you to create a separate context provider, which will provide the state and the methods to manipulate this state to all the components you need. In the example below I have a LoginContextProvider with activeTab state variable. I provide activeTab and setActiveTab to all the components inside LoginContextProvider's children. Header changes activeTab to 1, Homepage changes to 2 and LoginContextDebug represents the actual activeTab value.

const LoginContext = React.createContext(null);

const LoginContextProvider = ({ children }) => {
  const [activeTab, setActiveTab] = React.useState(0);

  return (
    <LoginContext.Provider value={{ setActiveTab, activeTab }}>
      {children}
    </LoginContext.Provider>
  );
};

const Header = () => {
  // Use setActiveTab here
  const { setActiveTab } = React.useContext(LoginContext);

  return (
    <div>
      <h1>I am header</h1>
      <button onClick={() => setActiveTab(1)}>Set activeTab to 1</button>
    </div>
  );
};

const Homepage = () => {
  // Use setActiveTab here
  const { setActiveTab } = React.useContext(LoginContext);

  return (
    <div>
      <h1>I am homepage</h1>
      <button onClick={() => setActiveTab(2)}>Set activeTab to 2</button>
    </div>
  );
};

const LoginContextDebug = () => {
  const { activeTab } = React.useContext(LoginContext);

  return (
    <pre style={{ padding: 10, background: "lightgray" }}>
      activeTab={activeTab}
    </pre>
  );
};

const App = () => (
  <LoginContextProvider value={null}>
    <Header />
    <Homepage />
    <LoginContextDebug />
  </LoginContextProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Collectives™ on Stack Overflow

ReactJS Call Function of another Component react-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related