Question

0

171

Vistas

Passing props to reactjs-popup component

I'm working on a Docusaurus project which is based on React, I wanted to add a popup modal with a title and an image inside. For the Modal I use reactjs-popup, eveything works fine only the title and image do not appear.

This is where I import the Modal:

import Modal from '../../components/Modal.js';
<Modal image="img/test.png" title="test" />

This is the Modal component:

   const Modal = ({ image, title }) => (

    <Popup
        trigger={
            <button type="button" className="button">
                Vezi exemplu!
            </button>
        }
        modal
        contentStyle={contentStyle}
        nested
    >
        {close => (
            <div className="modal">
                <button className="close" onClick={close}>
                    &times;
                </button>
                <div className="content">
                    <h1>{title}</h1>
                    <img src={image} />
                </div>
                <div className="actions">
                    <button
                        type="button"
                        className="button"
                        onClick={() => {
                            console.log('modal closed ');
                            close();
                        }}
                    >
                        close
                    </button>
                </div>
            </div>
        )}
    </Popup >
);

Modal.propTypes = {
    image: PropTypes.string,
    title: PropTypes.string
}

about 4 years ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-03T11:33:26.516Z

instead of const Modal = ({ image, title }) => ( , type as

const Modal = props => {const {image = "", title = ""} = props;

then make a return function

return( <Popup
    trigger={
        <button type="button" className="button">
            Vezi exemplu!
        </button>
    }
    modal
    contentStyle={contentStyle}
    nested
>
    {close => (
        <div className="modal">
            <button className="close" onClick={close}>
                &times;
            </button>
            <div className="content">
                <h1>{title}</h1>
                <img src={image} />
            </div>
            <div className="actions">
                <button
                    type="button"
                    className="button"
                    onClick={() => {
                        console.log('modal closed ');
                        close();
                    }}
                >
                    close
                </button>
            </div>
        </div>
    )}
</Popup >);
}

your all code should look like this.

    const Modal = props => {const {image = "", title = ""} = props;
    return( <Popup
    trigger={
        <button type="button" className="button">
            Vezi exemplu!
        </button>
    }
    modal
    contentStyle={contentStyle}
    nested
>
    {close => (
        <div className="modal">
            <button className="close" onClick={close}>
                &times;
            </button>
            <div className="content">
                <h1>{title}</h1>
                <img src={image} />
            </div>
            <div className="actions">
                <button
                    type="button"
                    className="button"
                    onClick={() => {
                        console.log('modal closed ');
                        close();
                    }}
                >
                    close
                </button>
            </div>
        </div>
    )}
     </Popup >);}

0

171

Passing props to reactjs-popup component

1 Respuestas

0

Encuentra empleos remotos

Andres GPT