1

I am trying to create a custom Modal in react. Followed most of tutorials I found and my Modal just never shows up. On the other hand react-modal did work, but I was having trouble styling it. Nevertheless my custom Modal should work, though it doesn't give any sings of life when I click on the icon.

My header:

function Header () {
    const [isOpen, setIsOpen] = useState(false)
    
    return(
        <>
            <header className="header">
            <div className="wrap">
                <span className="btn-icon">
                    <IconPlus onClick={() => setIsOpen(true)} className="icon icon-plus js-modal-init"/>             
                </span> 
            </div>
            <div className="header-inner">
                <div className="wrap">
                    <img className="logo" src="images/pic.svg" alt="Pic"/>
                    <div className="date-wrap">
                        <IconCalendar className="icon icon-plus js-modal-init"/>
                        <time>02 / 08 / 2019</time>
                    </div>
                </div>
            </div>
            </header>
            <ModalWindow open={isOpen} onClose={() => setIsOpen(false)} />
           
        </>
        )  
}

ModalWindow:

export const ModalWindow = ({open, onClose}) => {
    if(!open) return null

    return(
        <div className="modal-wrap js-modal">
            <div className="modal js-modal-inner">
                <h2>Create a task:</h2>
                <form action="">
                    <div className="field-wrap">
                        <label className="label" for="">Title:</label>
                        <input className="field" type="text" id="" placeholder="Enter title here..."/>
                    </div>
                    <div className="field-wrap">
                        <label className="label" for="">Hours:</label>
                        <input className="field" type="text" id="" placeholder="Add hours here..."/>
                    </div>
                    <div className="btn-wrap align-right">
                        <input onClick={onClose} className="btn" type="submit" value="Create"/>
                    </div>
                </form>
            </div>
        </div>
        
    )
}

css:

.modal-wrap {
    display: flex;
    visibility: visible;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: 350ms ease-in-out;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal {
    position: relative;
    width: 100%;
    max-width: 700px;
    padding: 50px 40px;
    background-color: #fff;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
}

.modal h2 {
    margin-top: 0;
    margin-bottom: 1em;
    color: #666;
    font-size: 30px;
    font-weight: 300;
}

.modal-wrap.is-visible {
    visibility: visible;
    opacity: 1;
}
aratata
  • 1,147
  • 1
  • 6
  • 22
  • 1
    Have you tried to debug it using react inspector? Does component appears in inspector at all? What props it receive? – Vlad Feb 16 '21 at 19:02
  • I just learned there is such a thing. I inspected it with react developer tool - a chrome extension. ModalWindow is present in components. When I click on the icon, prop "open" turns to true. So if I am not missing something, still no useful clues. – aratata Feb 16 '21 at 19:21
  • 1
    You may click 'eye` icon on right panel so it will bring from your react component to actual DOM component. Maybe there is z-index issue? Or the DOM element is mounted in wrong place – Vlad Feb 16 '21 at 19:49
  • When I clicked ModalWindow and then the eye icon it selected the whole page. Not really sure what does that mean though, any ideas? – aratata Feb 16 '21 at 20:09
  • 1
    Try to add `console.log('test')` statement before `return` statement on your modal component, we need to be sure that the code actually runs and component should be rendered. – Vlad Feb 16 '21 at 20:13
  • Console outputted 'test'. – aratata Feb 16 '21 at 20:16
  • 1
    So it actually renders somewhere. Try to find DOM element with `modal-wrap` class. Or remove classnames at all in your modal components, maybe there is some css which hide your modal? – Vlad Feb 16 '21 at 20:18
  • I removed the "modal-wrap", "js-modal", "modal", "js-modal-inner" classes and now it shows the modal, though completely distorted of course. Tried to change up the z index, but wasn't enough. Could you please check out the css I added? – aratata Feb 16 '21 at 20:29
  • 1
    There is `opacity: 0` on your `modal-wrap` class which makes modal transparent. You should either remove this css prop, or add `is-visible` class to your modal, as it have `opacity: 1` css. – Vlad Feb 16 '21 at 20:32
  • It works! Thank you so much! – aratata Feb 16 '21 at 20:38
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/228817/discussion-between-aratata-and-vlad). – aratata Feb 16 '21 at 22:53

1 Answers1

0

In your Header component, try wrapping the "IconPlus" tag with a button and onClick attribute.

Dhaval L.
  • 319
  • 5
  • 7