React: How to hide a component by clicking on it?

Question

I am trying to make a React component hidden by clicking on it but all I see online are explanations about event handlers on buttons and the like.

I'm using Next.js (but I don't think these means much for this).

This is my component:

import styles from './styles/popup.module.scss';
import React, { Component } from "react";


export default function Popup() {
    return (
        <div className={styles.popup}>
            <div className={styles.popupInner}>
                <h1>Temporary Closure</h1>
                <p>
                    Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that SS will be temporarily closed, effective 23<sup>rd</sup> March 2020
                </p>                    
            </div>
        </div>
    )
}

Answer 1

Try setting a state on click of your component. Below code should work.

import styles from './styles/popup.module.scss';
import React, { Component } from "react";


export default function Popup() {

    const [visible, setVisible] = React.useState(true);

    if(!visible) return null;

    return (
        <div className={styles.popup} onClick={() => setVisible(false)}>
            <div className={styles.popupInner}>
                <h1>Temporary Closure</h1>
                <p>
                    Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that sydney sauna will be temporarily closed, effective 23<sup>rd</sup> March 2020
                </p>
                <div className={styles.buttonContainer}><button className={styles.button}>Okay</button></div>

            </div>
        </div>
    )
}

Hope it helps.

Answer 2

You could use a state property which tells you whether you should hide the component or not. Based on that state, conditionally render another css class to the component you want to hide, using the classnames package (you will need to preinstall it npm install --save classnames )

import React, {useState} from 'react';
import classes from './Component.module.css';
import classNames from 'classnames';

const Component = props => {

    const [show, setShow] = useState(true);

    return (
        <div className={classes.Component} onClick={() => setShow(!show)}>
            <div
                className={classNames( {
                    [classes.Show]: true,
                    [classes.Disappear]: !show
                })}
            >
                {props.children}
            </div>
        </div>
    );
};

export default Component;

In the Disappear css class, you can use whatever css properties you need to make your component disappear in a more elegant way, such as display: none; or visibility: hidden; (including transitions)

Of course, if what you are looking for is just not rendering the component at all, the standard "wrapping the div in an if statement" shown in the other answers is a perfectly valid solution.

Answer 3

You need to create a state variable which will determine to show popup or not. You can achieve it by using useState hook.

import styles from './styles/popup.module.scss';
import React, { Component , useState } from "react";


export default function Popup() {
 const [isPopupVisible,setPopupVisibility] = useState(true);

    return (
        <div className={styles.popup}>
           { isPopupVisible && (<div className={styles.popupInner}>
                <h1>Temporary Closure</h1>
                <p>
                    Following the Australian government’s directive to keep our nation safe and limit the spread of Coronavirus (Covid-19), it is with great sadness that we advise that SS will be temporarily closed, effective 23<sup>rd</sup> March 2020
                </p>
                <div className={styles.buttonContainer}><button className={styles.button} onClick={setPopupVisibility(false)}>Okay</button></div>

            </div>)}
        </div>
    )
}