Trying to render HTML in React, but nothing pops up-CodePudding

I'm new to React and would like to start using it to improve the user stability and speed of my dashboard/UI. I'm trying to load in some HTML code using a React Component, and then rendering it using the root div i've created. (see code) I'm not sure where I'm doing something wrong since I'm not getting any errors in my editor.

dashboard.js:

class Cards extends React.Component {
    constructor(props) {
    return (
        <div className="cards">
            <div className="card-single">
                <h1>IT-Scan Form</h1>
                <a href="documents.html">Click here to start the IT-scan.</a>
            </div>
            <div className="parent">
                <div className="card-single">
                    <h1 className="las la-clipboard-list">1 Documents</h1>
                    <span></span>
                </div>

                <div className="card-single">
                    <h1>Automatic Pentest</h1>
                    <button className="red-btn">Start</button>
                </div>

                <div className="card-single">
                    <h1>SMB</h1>
                    <button className="red-btn">Start</button>
                </div>

                <div className="card-single">
                    <h1>Enterprise</h1>
                    <button className="white-btn">Start</button>
                </div>
            </div>

            <div className="popup-error" id="popup-error">
                <img src="../images/x.png" alt="" />
                <h2>Error</h2>
                <p className="error" id="error"></p>
                <button type="button" id="close" onClick={closeErrorPopup}>Reload</button>
            </div>

            <div className="messagebox" id="messagebox">
                <p className="las la-exclamation-triangle" style={{ fontSize: '30px', color: '#f56c6c' }}></p>
                <p className="messagebox-content" id="messagebox-content">This is a message box</p>
            </div>

            <div className="calculator">
                <label htmlFor="total">Total</label>
                <input type="number" id="total" value="0" placeholder="Enter value" />
                <label htmlFor="percentage" style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>Percentage %</span>
                    <span id="percentageText">0%</span>
                </label>
                <input type="range" id="percentage" onInput={calculate} onChange={calculate} />
                <label htmlFor="num" style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <span>Num</span>
                    <span id="numText">0</span>
                </label>
                <input type="number" id="num" onInput={calculate} onChange={calculate} />
                <div className="result" id="result">
                    <h5 style={{ margin: '8px 0', display: 'flex', justifyContent: 'space-between' }}>
                        <span>Result</span>
                        <span id="resultText" style={{ fontSize: '1.2rem' }}>__.__</span>

                    </h5>
                </div>
            </div>
        </div>
    );
    }
};



const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Cards />);

Here is my HTML File, where I'm loading in the component.

index.html:

<main>
                <div id="root"></div>
                      <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <script src="../reactJS/dashboard.js" ></script>


            </main>

CodePudding user response：

The constructor should return content, it should be returned by the render function as such:

class Cards extends React.Component {
    render() {
        return (
            <div className="cards">
                ...
            </div>
        );
    }
};

For more information visit the React docs

CodePudding user response：

You have your markup "returned" from the constructor of a class. In javascript constructors do not return anything.

You can either implement a render() method, or write a "functional" component as in this example :

    const Cards = () => {
      return <div>...</div>;
    }