0

I am trying to make a modal:

This is the header.jsx file:

import React from "react";
import styles from "./header.module.css";

const Header = () => {
    // Get the modal
    const modal = document.getElementById("myModal");

    // Get the button that opens the modal
    const btn = document.getElementById("myBtn");

    // Get the <span> element that closes the modal
    const span = document.getElementsByClassName("close")[0];
    
    console.log(btn)
    // When the user clicks on the button, open the modal
    btn.onclick = () => {
        modal.style.display = "block";
    }

    // When the user clicks on <span> (x), close the modal
    span.onclick = () => {
        modal.style.display = "none";
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = (event) => {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }

    return (
        <div className={styles.Header}>
            <div className={styles.login}>
                <button type="submit" id="myBtn">Login</button>
                <div className={styles.modal} id="myModal">
                    <div className={styles.modalContent}>
                        <span className={styles.close}>&times;</span>
                        <p>Some text in the Modal..</p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Header;

My btn.onclick function is returning a null but I have the element. I have correct IDs and className. When I console.log btn it gives me null. Why is it so?

I am a beginner in ReactJs so I tried using some hooks but got some weird error.

Any help would be greatly appreciated!

ITACS
  • 83
  • 1
  • 1
  • 9
  • 2
    This is just fundamentally not how you do this with React. Instead, if you **really** need a DOM reference to an element, you use a ref (details [here](https://reactjs.org/docs/glossary.html#refs) and [here](https://reactjs.org/docs/refs-and-the-dom.html)). But you don't in this case. – T.J. Crowder Dec 14 '21 at 10:33
  • 1
    The reason for the specific error is: The elements don't exist in the DOM until your function creates React elements for them and returns those and then React creates DOM elements for those React elements. But you're looking for the elements before your function has even done its part, much less React having done its part. – T.J. Crowder Dec 14 '21 at 10:33
  • 2
    React is designed that the DOM reflects your data model. To change the DOM you should change the data and let the render function update based on that. You should **avoid** directly manipulating the DOM. `useState` to say if the element should be displayed or not and then use the state value to either include/exclude it or to toggle something about its CSS. – Quentin Dec 14 '21 at 10:33
  • @Quentin what should I do? I have no idea. Can you share any link so reference – ITACS Dec 14 '21 at 10:36
  • @ITACS — The top link in the blue box at the top of the page (or any decent React tutorial) Typing *how to use usestate* into Google is probably also a good bet. – Quentin Dec 14 '21 at 10:36

0 Answers0