Как отобразить мое состояние с помощью реакции bootstrap правильно?

Question

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

мой код:

                 <Modal show={this.state.handModal}>
                            <Modal.Header>
                            <Modal.Title>Your hand</Modal.Title>
                            </Modal.Header>
                            <Modal.Body>
                                {
                                   ()=>{ if(this.state.randomHand){
                                        return(
                                              <div> 
                                                      <h5>Your Hand</h5>

                                                  {this.state.randomHand.map((card,index)=>{
                                                      return(
                                                      <div key={index}>
                                                      <p>card</p>
                                                      </div>
                                                      );
                                                  })}
                                              </div>  
                                        )
                                    }
                                    return(
                                        <div>
                                            <h5>We are picking your hand :)</h5>
                                            <Spinner animation="border" size="sm"/>
                                        </div>
                                        )
                                    }
                                }
                            </Modal.Body>
                            <Modal.Footer>
                            <Button variant="secondary" onClick={()=>{this.setState({handModal:false})}}>
                                Close
                            </Button>
                            </Modal.Footer>
                        </Modal>

Answer 1

Попробуйте сделать,

<Modal.Body>
   {this.state.randomHand ? <p>random hand</p> :  <p>We are picking your hand</p>}
</Modal.bBody>