rendering an additional pop up dialog on button click React

Question

I am having issues with rendering a pop up loading screen. So assume i have a imported component called ( LoadingDialog ) and i want it to render when the state property, loading is true. When the user clicks a button on the current component, it triggers an api call which also changes the loading state to true, thus rendering the loading dialog.

I understand I can use conditional rendering to achive this, eg:

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

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

but now i have a problem because, when my loadingDialog is rendered, my other ui (text area, background card, button ) all disappear, which is the opposite of what im trying to achieve. With this approach, i can only display my actual ui elements or the loading dialog.

I've tried separating the other ui elements into a separate container but it doesn't help as i need to call the api on click of an button and the entire problem i'm having now occurs in that child container.

I've also tried the above approach with passing a parent on click method as a prop and calling that when the button is clicked but somehow ended up with a recursive loop of the parent/child component

Heres my actual code:

 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>
      );
    }

and this is my handle click function:

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

As i said before, I tried separating the UI bit on the else block to a different component but the problem still persisted. To summarise it again, I can only render my actual ui or a popup box but not both at any given time. I want to be able to render both at the same time, if needed.

I am very new to react and staying away from the likes of redux, hooks etc.

Answer 1

SOLVED Thanks to Chris G

So the issue was easily fixed by using a logical and operator to check if loading is true or false, like so {this.state.loading && <LoadingDialog />}

eg.

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