Sample component reuse React

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Route, Switch, Link, Router, NavLink } from "react-router-dom";
import SchemaTablesList from './SchemaTablesList';
import Settings from './Settings';
import { ToastContainer } from "react-toastr";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import DbSchema from './DbSchema';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; //for more documentations, see reactstrap: https://reactstrap.github.io/
import Dashboard from './Dashboard';
import { withRouter } from "react-router-dom";
import Mousetrap from "mousetrap";
import ModalQuickAddTable from './Schema/ModalQuickAddTable';

/* ACTIONS */
import { initializeSchema, toggleModalAddSchema } from "../Actions/actionsSchema";
import { initializeTableTags } from "../Actions/actionsTableTags";
import { toggleModalTableAdd } from "../Actions/actionsModalTable";


import SidebarTableSchemas from './Sidebar/SidebarTableSchemas';
import SidebarTableTags from "./Sidebar/SidebarTableTags";
import MenuTags from "./Menu/MenuTags";

class App extends Component {

  container;
  constructor(props) {
    super(props);
    this.state = { container: null, showModal: false, schemaTableModal: false };

    this.toggleSchemaTableModalAdd = this.toggleSchemaTableModalAdd.bind(this);
  }

  toggleSchemaTableModalAdd() {
    this.props.toggleModalTableAdd();
  }

  componentWillMount() {
    this.props.initializeSchema();
    this.props.initializeTableTags();
  }

  componentDidMount() {
    Mousetrap.bind(['q'], this.toggleSchemaTableModalAdd);
  }
  componentWillUnmount() {
    Mousetrap.bind(['q'], this.toggleSchemaTableModalAdd);    
  }

  onAddNewSchemaTable(e) {
    e.preventDefault();
  }
  
  render() {

    return (
      <div>
        <ModalQuickAddTable />

        <header>
          <nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <a className="navbar-brand" href="#">Note My DB</a>
            <button className="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarsExampleDefault">
              <ul className="navbar-nav mr-auto">
                <li className="nav-item active">
                  <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">Settings</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">Profile</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">Help</a>
                </li>
              </ul>
            </div>
          </nav>
        </header>

        <div className="container-fluid">
          <div className="row">
            <nav className="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
              <ul className="nav nav-pills flex-column">
                <li className="nav-item">
                  <NavLink exact to="/" className="nav-link">
                      <i className="fas fa-home"></i> Dashboard
                  </NavLink>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">Configuration</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">Options</a>
                </li>
              </ul>

              <SidebarTableSchemas />
              <SidebarTableTags />
            </nav>

            <main role="main" className="col-sm-9 ml-sm-auto col-md-10 pt-3">
              <div>
                <Switch>
                  <Route exact path="/" component={ Dashboard } />                  
                  <Route path="/settings" component={ Settings } />
                  <Route path="/schemas/:id" component={ SchemaTablesList } />
                  <Route path="/tags/:id" component={ MenuTags } />

                </Switch>
              </div>
            </main>
          </div>
        </div>

      </div>
    );
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ initializeSchema, toggleModalAddSchema, toggleModalTableAdd, initializeTableTags }, dispatch);
}

function mapStateToProps(state) {
  return { schemas: state.schemas };
}

// export default connect(mapStateToProps, mapDispatchToProps)(App);
// export default App;
export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(App)
);

SidebarTableSchemas.js

import React, { Component } from 'react';
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { initializeSchema, addSchema } from "../../Actions/actionsSchema";
import DbSchema from '../DbSchema';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; //for more documentations, see reactstrap: https://reactstrap.github.io/
import { withRouter } from "react-router-dom";

class SidebarSchemas extends Component {
    constructor(props) {
        super(props);
        this.state = { modal: false, schemaName: '' };

        this.showAddSchemaModal = this.showAddSchemaModal.bind(this);
        this.toggle = this.toggle.bind(this);
        this.onAddNewSchema = this.onAddNewSchema.bind(this);
    }

    componentWillMount() {
        this.props.initializeSchema();
    }

    renderDbSchemas() {
        // console.log(this.props.schemas);
        return this.props.schemas.map(x => <DbSchema id={x.id} key={x.id} name={x.name} />);
    }

    showAddSchemaModal() {
        this.setState({
            modal: !this.state.modal
        });
    }
    
    toggle() {
        this.setState({
            modal: !this.state.modal
        });
    }

    onAddNewSchema(e) {
        e.preventDefault();

        this.props.addSchema(this.state.schemaName);
        this.toggle();
    }
    
    render() {

        return (
            <ul className="nav nav-pills flex-column">
                <Modal isOpen={this.state.modal} fade={false} toggle={this.toggle} className={this.props.className}>
                    <ModalHeader toggle={this.toggle}>Add new Database Schema</ModalHeader>
                    <ModalBody>
                        <div className="form-group">
                            <form onSubmit={(e) => this.onAddNewSchema(e)}>
                                <div className="row">
                                    <div className="col-md-12">
                                        <input type="text" className="form-control" placeholder="Schema name" onChange={(e) => this.setState({ schemaName: e.target.value })}/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </ModalBody>
                    <ModalFooter>
                        <Button color="primary" onClick={(e) => this.onAddNewSchema(e)}>Save</Button>{' '}
                        <Button color="secondary" onClick={this.toggle}>Cancel</Button>
                    </ModalFooter>
                </Modal>

                <li className="nav-item">
                    <b>Your Schema</b>
                </li>
                
                {this.renderDbSchemas()}

                <li className="nav-item">
                    <button className="btn btn-primary" onClick={this.showAddSchemaModal}> 
                        <i className="fas fa-plus-square"></i> Add new Schema 
                    </button>
                </li>
            </ul>
        );
    }
}

// export default SidebarTableSchemas;

function mapStateToProps(state) {
    const schemas = state.schemas.filter(x => !x.deleted);
    return { schemas };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ initializeSchema, addSchema }, dispatch);
}

// export default connect(mapStateToProps, mapDispatchToProps)(SidebarTableSchemas);

//note: we need to add withRouter in our container if we want to make the NavLink activeClassName work. For more info, go here: https://reacttraining.com/react-router/web/api/NavLink/activeClassName-string
export default withRouter(
    connect(mapStateToProps, mapDispatchToProps)(SidebarSchemas)
);