How to hang a class through the portal on click?

Question

JavaScript

import React, { Component } from 'react';
import {NavLink, Link} from 'react-router-dom';
import logo from '../images/logo_dark.svg';

export default class MainHeader extends Component {
    constructor(props) {
        super(props)
        this.state = {
            menuOpen: false,
        }
        this.openMenu = this.openMenu.bind(this)
    };

    openMenu () {
        this.setState({ menuOpen: !this.state.menuOpen})
    };
    render() {

        let data = {
            work: "Работаем: ПН-СБy",
            schedule: "9.00-19.00",
            supportEmail: "support.com",
            links: {
                office: {
                    href: '/office',
                    caption: 'В кабинет',
                    target: 'false'
                },
                registration: {
                    href: '/registration/register',
                    caption: "Зарегистрироваться",
                    target: 'false'
                }
            },
            ...this.props
        };
        console.log('data', data)

        const clsMenu = [ "nav-default"]
        const clsHamb = [ "hamburger", "hamburger--spin"]

        if (this.state.menuOpen) {
            clsHamb.push('is-active');
            clsMenu.push('is-active');
            document.body.classList.add('nav_open')
        } else {
            document.body.classList.remove('nav_open')
        }
        return (
            <header className="store-header header-default">
                <div className="container-fluid">
                    <div className="header-default-box">
                        <Link key="anchLogo" to="/" className="store-header__logo"></Link>
                        <div className={ clsHamb.join(' ')} onClick={this.openMenu.bind(this)} >
                            <div className="hamburger-box">
                                <div className="hamburger-inner"></div>
                            </div>
                        </div>
                        <div className="header-default-support">
                            <span className="store-header__work">{data.work}<span>{data.schedule} </span></span>
                            <span className="store-header__support">
                            <a href={"mailto:" + data.supportEmail} >{data.supportEmail}</a>
                        </span>
                        </div>
                        <nav className={ clsMenu.join(' ')}>
                            <ul className="nav-default-list">
                                {
                                    Object.values(data.links).map(({ href, caption,target }) => (
                                        <li> <NavLink to={href} target={ target ? "_blank" : "_self" }>{caption}</NavLink></li>
                                    ))
                                }
                            </ul>
                        </nav>
                        { this.state.menuOpen ? <div className="Backdrop" onClick={this.openMenu.bind(this)}></div> : null }
                    </div>
                </div>
            </header>
        );
    }
}

how to pass through the portal on click the class on the body when the menu opens?

Answer 1

No portals needed.
document.body.classList.add('no-scroll');