react How to hide the Card when another location is pressed

Question

Developed with react and typescript.
Now the card is shown or hidden when you click on the div tag.
I want to hide the Card when it is displayed, even if another place other than the div tag is pressed.

import React, { FunctionComponent, useState } from 'react';
import { Card } from 'components/atoms/Card';
import { Display } from 'components/atoms/Display';
const Test: FunctionComponent = () => {
  const [isDisplay, setIsDisplay] = useState(false);

  const onClick = () => {
    setIsDisplay(!isDisplay);
  };
  return (
    <>
      <div onClick={onClick} style={{ width: '100px', height: '100px' }}>
        display Card
      </div>
      <Display enabled={isDisplay}>
        <Card width={100} height={100}></Card>
      </Display>
    </>
  );
};

export default Test;

Can you rephrase your need? I tried to read like 4~5 times and still do not got it. — Roni Antonio, Nov 12 '20 at 21:16
Does this answer your question? [Detect click outside React component](https://stackoverflow.com/questions/32553158/detect-click-outside-react-component) — over-engineer, Nov 12 '20 at 21:18

score 0 · Answer 1 · answered Nov 12 '20 at 21:43

0

Try this in your onClick method. It looks like you need to access the current state's value and update it.

setIsDisplay(state => !state);

It's explained here in the React docs. https://reactjs.org/docs/hooks-reference.html#functional-updates

answered Nov 12 '20 at 21:43

Joseph Gordy

106
1
7

I pressed somewhere else and it didn't disappear – iiiuuuu Nov 13 '20 at 02:37

react How to hide the Card when another location is pressed

1 Answers1