How to duplicate a function in React.js?

Question

React

Hello. The site has a side menu that slides out. I want to create another menu, but already attaching it to the right side. I succeeded in duplicating it, but it does not open, since I cannot duplicate the functions for opening the menu. I will give the code below.

/* @flow */
import React from "react";
import { compose, onlyUpdateForKeys } from "recompose";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import io from "socket.io-client";
import type { UserType } from "../user/types";
import { selectors as userSelectors } from "../user/logicBundle";
import { addModal } from "../modals/logicBundle";
import Header from "./Header";
import Navbar from "./Navbar";
import Navbarpravo from "./Navbarpravo";
import Stats from "./Stats";
import Footer from "./Footer";
import "./PageWrapStyle.scss";

const forceWindowResize = () => {
  const event = document.createEvent("HTMLEvents");
  event.initEvent("resize", true, false);
  window.dispatchEvent(event);
};

export class PageWrap extends React.PureComponent {
  state: {
    isShowNavbar: boolean,
  } = {
    isShowNavbar: false,
  };
  
  // noinspection JSMethodCanBeStatic
  componentDidMount() {
    window.socket.online = io("/online", window.socket.opts);
  }

  props: {
    // noinspection JSUnresolvedVariable
    children: React$Element<*>,
    user: UserType,
    actions: Object,
  };

  openInventoryModal = () => {
    this.props.actions.addModal({ type: "INVENTORY" });
  };

  openPaymentModal = () => {
    this.props.actions.addModal({ type: "PAYMENT" });
  };

  toggleNavbar = () => {
    this.setState({ isShowNavbar: !this.state.isShowNavbar });
    const task = setInterval(forceWindowResize, 10);
    setTimeout(() => clearInterval(task), 300);
  };
  
  render() {
    const { children } = this.props;
    const pageName = children && children.pageName ?
      children.pageName : "";
    return (
      // $FlowFixMe
      <div className={`page-wrap ${pageName} ${this.state.isShowNavbar ? "show-navbar" : ""}`.trim()}>
        <Header
          user={this.props.user}
          openInventoryModal={this.openInventoryModal}
          openPaymentModal={this.openPaymentModal}
        />
        <Navbar toggleNavbar={this.toggleNavbar} />
    <Navbarpravo toggleNavbarpravo={this.toggleNavbarpravo} />
        <div className="content">
          <div className="container">
            <Stats />
            {children}
            <Footer />
          </div>
        </div>
      </div>
    );
  }
}


export const enhance = compose(
  connect(
    state => ({
      user: userSelectors.getUser(state),
    }),
    dispatch => ({
      actions: bindActionCreators({
        addModal,
      }, dispatch),
    })
  ),
  onlyUpdateForKeys(["children", "user"])
);

export default enhance(PageWrap);

Here is this piece

export class PageWrap extends React.PureComponent {
  state: {
    isShowNavbar: boolean,
  } = {
    isShowNavbar: false,
  };

which closes } at the very end almost and here is another piece of code

toggleNavbar = () => {
    this.setState({ isShowNavbar: !this.state.isShowNavbar });
    const task = setInterval(forceWindowResize, 10);
    setTimeout(() => clearInterval(task), 300);
  };

These two pieces of code are responsible for opening the menu, simply duplicating it gives an error in the console, it doesn’t even compile.
The main menu is called Navbar
Duplicate with the name Navbarpravo
Help.

Answer 1

You create a separate Menu component, in which its position is set by the incoming prop, let's say position. You implement all the accompanying logic in the component (opening / closing, etc.).
Next, you add 2 instances of the menu component to the parent render, but in props you pass left to one in position, and right to the second.