рендеринг дополнительного всплывающего диалогового окна при нажатии кнопки

Question

У меня проблемы с отображением всплывающего экрана загрузки. Итак, предположим, что у меня есть импортированный компонент с именем (LoadingDialog), и я хочу, чтобы он отображался, когда свойство состояния загружается в true. Когда пользователь нажимает кнопку на текущем компоненте, он запускает вызов API, который также изменяет состояние загрузки на true, тем самым отображая диалоговое окно загрузки.

Я понимаю, что могу добиться условного рендеринга, например:

 if(this.state.loading){
      return (
        <div>
        <LoadingDialog />
        </div>

      )
    }
    else{
      return(
      <div> OTHER UI ELEMENTS </div>
     )

но теперь у меня есть проблема, потому что, когда мой loadingDialog рендерится, все мои другие интерфейсы (текстовая область, фоновая карта, кнопка) исчезают, что противоположно тому, что я пытаюсь достичь. При таком подходе я могу отображать только мои фактические элементы пользовательского интерфейса или диалог загрузки.

Я пытался разделить другие элементы пользовательского интерфейса в отдельный контейнер, но это не помогло, так как мне нужно вызывать API по нажатию кнопки, и вся проблема, с которой я столкнулся, теперь возникает в этом дочернем контейнере.

Я также попробовал описанный выше подход с передачей родительского метода click в качестве реквизита и вызывая его при нажатии кнопки, но каким-то образом заканчивая рекурсивным циклом родительского / дочернего компонента

Вот мой фактический код:

 if(this.state.loading){
      return (
        <div>
        <LoadingDialog />
        </div>

      )
    }
    else{
      return (
        <div>
          <Card className="center card">
            <div className="row">
              <div class="column" >
                <TextField
                  id="outlined-name"
                  name="searchContent"
                  onChange={this.handleChange}
                  value={this.state.searchContent}
                  label="Name"
                  variant="outlined"
                />
              </div>
              <div className="column">
                <Button
                  variant="outlined"
                  color="primary"
                  onClick={this.handleClick}
                >
                  Search
                </Button>
              </div>
            </div>
          </Card>
        </div>
      );
    }

и это моя функция нажатия на ручку:

  handleClick = (event, name) => {
    this.setState({loading : true})
    fetch(uri)
      .then(res => res.json())
      .then(data => {
        console.log(data);
        this.setState({loading : false})
      });
  };

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

Я очень новичок, чтобы реагировать и держаться подальше от таких как редуксы, крючки и т. Д.

Answer 1

решено благодаря Крису G

Таким образом, проблема была легко решена с помощью логического оператора и оператора, чтобы проверить, является ли загрузка истинной или ложной, например {this.state.loading && <LoadingDialog />}

напр.

render(){
   return(
     <div>
       {this.state.loading && <LoadingDialog />}
     <div>
        //REST OF THE STUFF THAT SHOULD BE RENDERED REGARDLESS
     </div>
    </div>
    )
}