Simple React StateManager

Body.tsx

import Header from "../components/header/Header";

function toggleSideBar() {
    
    if (Header.MyState.sideBarclassName === "") {
        Header.MyState.update("sideBarclassName", "active", Header.MyState);
    } else {
        Header.MyState.update("sideBarclassName", "", Header.MyState);
    }
}
function Body(props: any) {

    return (
        <div id="body" className="active">
            <nav className="navbar navbar-expand-lg navbar-white bg-white">
                <button onClick={toggleSideBar} type="button" id="sidebarCollapse" className="btn btn-light">
                    <i className="fas fa-bars"></i><span></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="nav navbar-nav ms-auto">
                        <li className="nav-item">
                            <div id="nav2" className="nav-item nav-link text-secondary">
                                <i className="fas fa-user"></i> <span>Adeel Rizvi</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>

            <div className="content">
                <div className="container">

                    {props.children}

                </div>
            </div>

        </div>
    );
}
export default Body;

Header.tsx

import { Link } from "react-router-dom";
import { StateManager } from "../../context/StateManager";

// extends the state manager
export default class Header extends StateManager {

    constructor(props: any) {
        super(props, { sideBarclassName: "active" });
        Header.MyState = this.state;
    }

    render() {
        return (
            <nav id="sidebar" className={this.state.sideBarclassName}>
                <div className="sidebar-header">
                    My State Manager Test
                </div>
                <ul className="list-unstyled components text-secondary">
                    <li>
                        <Link to="/"><i className="fas fa-home"></i> Menu 0</Link>
                    </li>
                    <li>
                        <Link to="/menu-1"><i className="fas fa-file-alt"></i> Menu 1</Link>
                    </li>
                    <li>
                        <Link to="/menu-2"><i className="fas fa-layer-group"></i> Menu 2</Link>
                    </li>
                    <li>
                        <Link to="/menu-3"><i className="fas fa-user-shield"></i> Menu 3</Link>
                    </li>
                </ul>
            </nav>
        );
    }

}

StateManager.ts

/*
 * Author: Adeel Rizvi
 * Idea is to add this class to each component and extends it e.g. 'class MyComponent extends StateManager'
 * So, I don't need to write the setState everytime and everywhere and because its exposing as static property we can call this method
 * from the caller and update any component state. see Header.tsx and Body.tsx - This is good for upward direction. 
 *
 * There are more easy ways to do but, I wanted to waste my 2 mins somewhere so i did it here.
 *
 * Cons:
 * Will not work properly on Multiple instance of same component as it's a static property and all the same components will get the same state.
*/
import React from "react";

type StateData = {
    [x: string]: any
}

export class StateManager extends React.Component<{}, StateData> {

    static MyState: StateData;

    constructor(props: any, initialState: StateData) {
        super(props);

        initialState.update = (stateName: string, newVal: any, currentState: StateData, updateOldState: boolean = true) => {

            // lets create temp object
            const newState: any = {};
            newState[stateName] = newVal;

            this.setState(newState);

            // if user agrees to update currentState then do it.
            if (updateOldState) {
                currentState[stateName] = newVal
            }
        }

        // override default
        this.state = initialState;

    }

}