Why is the React code not working?

Question

React

Hello!
We started to learn React and almost immediately the question arose:
there are two files - Header.jsx and Submenu.jsx.
in header.jsx there is a container <div id="modalMenu"></div>, in submenu, in fact, there is a container <div id="submenuContainer"></div>.

what, in fact, is the question: I want to style the sub-menu container:

<div id="submenuContainer" style={{marginLeft: document.getElementById("modalMenu").scrollWidth}}></div>

Why doesn't it work and how can I fix it? Both files are loaded in app.jsx, here is the code

for app.jsx:

import React from "react";
import Header from "./app/Header/Header";
import "./App.stylesheet.css";
import "./App.main.css";
import Submenu from "./app/Submenu/Submenu";
import Product from "./app/Modules/Product/Product"
import Loading from "./app/Loading/Loading"

class App extends React.Component {
    render() {
        return (
            <div>
                <header>
                    <Header />
                </header>
                <main id="content">
                    <Submenu />
                    <Product />
                </main>
            </div>
            // <Loading />
        );
    }
}

export default App;

header.jsx:

import React from "react";
import Menu from "./Menu/Menu";
import Logo from "./Logo/Logo";
import Controls from "./Controls/Controls";
import MenuContainer from "./Menu/MenuContainer";

class Header extends React.Component {
    render() {
        return (
            <div className="header-container" id="headerContainer">
                <div className="flex-row">
                    <div className="col-1-3"><Menu /></div>
                    <div className="col-1-3"><Logo /></div>
                    <div className="col-1-3"><Controls /></div>
                </div>
                <div className="modal-menu" id="modalMenu"><MenuContainer/></div>
            </div>
        );
    }
}

export default Header;

submenu.jsx:

import React from "react";
import Statistic from "./Sub-pages/Statistic";
import Products from "./Sub-pages/Products";
import Articles from "./Sub-pages/Articles";
import Sales from "./Sub-pages/Sales";
import Mediafiles from "./Sub-pages/Mediafiles";
import Delivery from "./Sub-pages/Delivery";
import Partners from "./Sub-pages/Partners";
import Suppliers from "./Sub-pages/Suppliers";
import Purchases from "./Sub-pages/Purchases"

class Submenu extends React.Component {
    render() {
        return (
            <div className="submenu" id="submenuContainer" style={{marginLeft: document.getElementById("modalMenu").scrollWidth}}>
                {/* <Statistic /> */}
                {/* <Products /> */}
                {/* <Articles /> */}
                {/* <Sales /> */}
                {/* <Mediafiles /> */}
                {/* <Delivery /> */}
                {/* <Partners /> */}
                {/* <Suppliers /> */}
                {/* <Purchases /> */}
            </div>            
        );
    }
}

export default Submenu;

I beg you not to throw slippers at me, I really want to figure out how to work with this. Thank you!

Answer 1

React does not use id, it has its own react house tree, so you need to forget about id here. Now, as for the functionality, you need to study what props are, and swipe with them. Or if the components have a large chain, and you need to loop a lot, use redux mobx useState to choose from

Answer 2

What style are you trying to set? If you are already setting such a most strange indentation, then write like this:

<div id="submenuContainer" style={{marginLeft: {`${document.getElementById("modalMenu").scrollWidth}px`}}}></div>

If you are just starting to learn React, go straight to the study of functional components, not class ones.
React does not recommend calling dom, i.e. it recommends not using calls to document.
It is better to find a more adequate option to set the indent.

Answer 3

modx+minishop2. This is if you want it simpler and don't plan a lot of products/options/filters.
Something more or less large and complex, Bitrix/CS-Cart.

Answer 4

I would recommend Opencart 2
Quite decent CMS

Answer 5

check ecommwar.com there are many options

Answer 6

Open cart 2 is just right for you . Free, simple architecture, the necessary functions are there, there are ready-made templates.

Answer 7

I strongly advise diafan.cms
tried a lot, free and paid boxed. eventually settled on diafan.

Answer 8

Opencart and ezCatalog CMS will suit your requirements . Both have good architecture. The first is free, the second is paid. But the second one works faster and is easier to integrate with 1C.