React-Boostrap Modal не отображается

Question

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

Это код для модального. И функции showModal и hideModal имеют значение, устанавливая логическое значение showModal в true и false соответственно.

я имею import { Button, Modal } from 'react-bootstrap в верхней части моего файла.

Может кто-нибудь мне помочь?

ТИА

<Modal show={this.state.showModal} onHide={(e)=> this.hideModal(e)}>
    <Modal.Header closeButton>
        <Modal.Title>Translations</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        <h4>Filter:</h4>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
        <hr />
    </Modal.Body>
    <Modal.Footer>
        <Button onClick={(e)=> this.hideModal(e)}>Close</Button>
    </Modal.Footer>
</Modal>

<Button className="btn btn-primary m-1" onClick={(e)=> { this.showModal(e) }}>
    See modal
</Button>

Answer 1

show проп принимает булево. когда true Модал покажет себя. Так что внутри вашего обработчика вам нужно установить состояние true/false,

Вы можете проверить здесь с рабочей демонстрацией стекаблита.

Фрагмент кода

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Button, Modal } from 'react-bootstrap';

//Presentational Components MyModel
const MyModel = (props) => (<Modal show={props.isHidden} onHide={props.onClose}>
  <Modal.Header closeButton>
    <Modal.Title>Translations</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <h4>Filter:</h4>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <hr />
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={props.onClose}>Close</Button>
  </Modal.Footer>
</Modal>);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    }
  }

  showModal = (e) => {
    this.setState({ showModal: true })
  }

  hideModal = (e) => {
    this.setState({ showModal: false })
  }

  render() {
    return (
      <div>
        <MyModel isHidden={this.state.showModal} onClose={this.hideModal} />
        <Button className="btn btn-primary m-1" onClick={this.showModal}>Show modal</Button>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));