CODEWITHSUNDEEP
javascripthtmlreactjs
KylianJay
KylianJay

Reputation: 55

Trying to render HTML in React, but nothing pops up

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>

Upvotes: 0

Views: 60

Answers (3)

Max Cruer
Max Cruer

Reputation: 110

Move your JSX code from the constructor into the render() method

Upvotes: 1

dieter
dieter

Reputation: 1469

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>;
    }

Upvotes: 0

Asplund
Asplund

Reputation: 2486

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

Upvotes: 1

Related Questions