Как скрыть компонент в React при клике вне компонента?

Итоговый код компонента, если кому-нибудь пригодится. Или есть замечания, тоже напишите!

const  AddProject = (props) =>  {
const [editMode, setEditMode] = useState(false);
const [newName, setNewName] = useState({});
const [newContent, setNewContent] = useState({});

  const wrapperRef = useRef();

  const handleClick = (e) => {
    if (wrapperRef.current) {
      if (!wrapperRef.current.contains(e.target)) {
        console.log("click outside add component");
        setEditMode(false);
      }
    }
  };

useEffect(() => {
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  const useStyles = makeStyles((theme) => ({
    Container: {
      margin: "0 auto",
      display: "flex",
      justifyContent: "center",
    },
    buttonBlock: {
      display: "flex",
      justifyContent: "flex-end",
      alignItems: "center",
      marginTop: "20px",
      overflowX: "hidden",
    },
    buttonText: {
      alignSelf: "center",
      marginRight: "10px",
    },
    button: {
      marginTop: "20px",
    },
    addTaskBox: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "spaceBetween",
      alignSelf: "center",
      width: "50%",
    },
  }));

  const classes = useStyles();
  return (
    <Container className={classes.Container}>
      {!editMode ? (
        <div className={classes.buttonBlock}>
          <div className={classes.buttonText}>
            <Typography color='primary'>ADD NEW PROJECT</Typography>
          </div>
          <Fab size='small' color='primary' aria-label='add'>
            <AddIcon onClick={() => setEditMode(true)} />
          </Fab>
        </div>
      ) : (
        <Box className={classes.addTaskBox} ref={wrapperRef}>
          <Typography color='primary'>ADD NEW PROJECT</Typography>
          <Input
            placeholder='Enter title for your project'
            name='name'
            onChange={(e) => setNewName(e.target.value)}
          />

          <Input
            placeholder='Description'
            name='content'
            onChange={(e) => setNewContent(e.target.value)}
          />
          <Button
            className={classes.button}
            variant='contained'
            color='secondary'
            size='small'
            color='primary'
            aria-label='add'
            onClick={() => {
              props.addProject(props.userId, {
                name: newName,
                content: newContent,
              });
              setEditMode(false);
            }}
          >
            <Typography vatuant='button-text'>ADD </Typography>
          </Button>
        </Box>
      )}
    </Container>
  );
}

Как скрыть компонент в React при клике вне компонента?

Спасибо за подробный ответ! Получилось осуществить все, что хотела)

Как предотвратить дублирование в массиве?

Bavashi, работает! Огромное спасибо:)

Как правильно собрать данные форма с помощью new FormData?

а попробуйте вот так посмотреть, есть ли данные

let formData = new FormData('your_form');
formData = Object.fromEntries(formData);
console.log(formData)

Почему сетевой запрос на сервер с клиента (react) не проходит?

Судя по консоли промис где-то не зарезолвлен

Как скрыть компонент в React при клике вне компонента?

Владимир, спасибо! уже в процессе)

Как из одного компонента вызвать метод другого компонента в React?

Мне кажется это не мешает абсолютно спозиционировать модальное окно. Прописать стили для него и все.

Можно посмотреть такое демо

Есть ещё react-modal

Как скрыть компонент в React при клике вне компонента?

Спасибо за ответ, буду разбираться с useEffect()

Как скрыть компонент в React при клике вне компонента?

Я имела в вижу нечно подобное

export default class OutsideClick extends Component {
  constructor(props) {
    super(props);

    this.setWrapperRef = this.setWrapperRef.bind(this);
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentDidMount() {
    document.addEventListener('mousedown', this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener('mousedown', this.handleClickOutside);
  }

  /**
   * Set the wrapper ref
   */
  setWrapperRef(node) {
    this.wrapperRef = node;
  }

  /**
   * Alert if clicked on outside of element
   */
  handleClickOutside(event) {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      alert('You clicked outside of me!');
    }
  }

  render() {
    return <div ref={this.setWrapperRef}>{this.props.children}</div>;
  }
}

Как скрыть компонент в React при клике вне компонента?

да, это вариант, если кликать на конкретный div)
Но хочу скрыть элемент при клике в любую точку экрана, вне этого самого элемента

Как правильно при удалении элемента коллекции удалить ссылки на этот элемент(находящиеся внутри массива других коллекций MongoDB)?

Спасибо за помощь, решила вопрос с помощью $in.

Как правильно при удалении элемента коллекции удалить ссылки на этот элемент(находящиеся внутри массива других коллекций MongoDB)?

При такой попытке выбрасывается следующая ошибка:
Error: Can't use $oid with Array.

Пыталась также сделать вот как:

/// Delete task
router.route("/:taskId").delete(async (req, res) => {
  const deleted = await Task.findByIdAndDelete(req.params.taskId);
  if (deleted.executor) {
    await User.updateOne(
      { _id: deleted.executor },
      { $unset: { "tasks.$": req.params.taskId }  }
    );
  }
    res.send(deleted)
});

Тогда получаю вот что:
MongoError: The positional operator did not find the match needed from the query.

В чем моя ошибка? Hеправильно использую position operator($)?

Как отловить момент пробрасывания данных из родительской компоненты в дочернюю?

Была такая же ситуация, кроме такого же способа проверки наличия массива в пропсах пока ничего не придумала:)

Hе пришли props от родителя. Почему?

abberati, обязательно в перспективе буду осваивать. Но для начала нужно разобраться с javascript)

Hе пришли props от родителя. Почему?

Спасибо, добрый человек!!! Как всегда глаз замыливается и часами ищу ошибку!

Как лучше делать асинхронные запросы в контейнерной компоненте React, чтобы в презентационную пришли обновленные пропсы?

Владислав Лысков, да, через componentDidMount(). Только в нём разрешено делать асинхронные запросы)

Как лучше делать асинхронные запросы в контейнерной компоненте React, чтобы в презентационную пришли обновленные пропсы?

Владислав Лысков, ок спасибо! Получилось решить проблему, решение я прикрепила к вопросу

Как лучше делать асинхронные запросы в контейнерной компоненте React, чтобы в презентационную пришли обновленные пропсы?

Компонента не монтируется, так как ее дочерние компоненты не монтируются из-за ошибки. Ошибка из-за отсутствия нужных значений в пропсах, которые я не знаю как получить. Замкнутый цикл.

asyns/await я уже использую, но компонента даже не достигает монтирования, а значит запрос не идет.

async componentDidMount() {
    await this.props.getProjectsThunk(this.props.userId);
}

Возможно я неправильно понимаю логику. Как сделать так, чтобы компонента, у которой куча детей, использующих её пропсы при отрисовке без проблем монтировалась?