Custom Modal not rendering in Reactjs

Question

I have tried to implement reactjs-popup into my code and I came across an issue. As you can see in the image below, the popup works but no content is displayed. I believe it is a styling issue as the html seems to render properly. Here is an example of it working.

Here is my code:

import React from 'react'
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';


const Dog = () => {
return(
<div className="app-container">
                                                    <Popup 
                                                    trigger={
                                                        <a href="javascript:void(0)">
                                                            bob
                                                        </a>
                                                    } 
                                                    modal
                                                    nested
                                                    >

                                                     {close => (
                                                        <div className="modal">
                                                            <button className="close" onClick={close}>
                                                            &times;
                                                            </button>
                                                            <div className="header"> Modal Title </div>
                                                            <div className="content">
                                                            {' '}
                                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
                                                            Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
                                                            delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos?
                                                            <br />
                                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                                                            commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                                                            explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                                                            </div>
                                                            <div className="actions">
                                                            <button
                                                                className="button"
                                                                onClick={() => {
                                                                console.log('modal closed ');
                                                                close();
                                                                }}
                                                            >
                                                                close modal
                                                            </button>
                                                            </div>
                                                        </div>
                                                        )}
                                                    </Popup>
</div>
)
}

export default Dog

Can anyone help?

Answer 1

Remove className="modal"

import React from 'react'
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';


const Dog = () => {
    return (
        <div className="app-container">
            <Popup
                trigger={
                    <a href="javascript:void(0)">
                        bob
                                                        </a>
                }
                modal
                nested
            >

                {close => (
                    <div className="">
                        <button className="close" onClick={close}>
                            &times;
                                                            </button>
                        <div className="header"> Modal Title </div>
                        <div className="content">
                            {' '}
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
                            Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
                            delectus doloremque, explicabo tempore dicta adipisci fugit amet dignissimos?
                                                            <br />
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
                            commodi beatae optio voluptatum sed eius cumque, delectus saepe repudiandae
                            explicabo nemo nam libero ad, doloribus, voluptas rem alias. Vitae?
                                                            </div>
                        <div className="actions">
                            <button
                                className="button"
                                onClick={() => {
                                    console.log('modal closed ');
                                    close();
                                }}
                            >
                                close modal
                                                            </button>
                        </div>
                    </div>
                )}
            </Popup>
        </div>
    )
}

export default Dog