Как сделать React Modal открытым в новом окне

Question

Мой новый модал отображается под родительским модалом. Как сделать его открытым в новом окне / модале? Вот часть кода.

class ForgotPassword extends Component {
  state = {
    showModal: false,
    email: "",
    errors: {
      cognito: null,
      blankfield: false
    }
  };

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

  clearErrorState = () => {
    this.setState({
      errors: {
        cognito: null,
        blankfield: false
      }
    });
  };

 <button
    className="ui medium button is-success"
    style={{ position: "relative", left: "350px" }}
    onClick={this.openModal}>
     {t("collaborateur.attribut.bouton.soumettre")}
 </button>
 <ForgotPasswordVerification showModal={this.state.showModal}/>

В модале, который должен появиться, я просто добавил это:

class ForgotPasswordVerification extends Component {
render() {
    if (!this.props.showModal) {
      return null;
    }
   }

Answer 1

Есть разные способы. Одним из способов является

class ForgotPassword extends Component {
  state = {
    showForgotPasswordVerification: false,
    email: "",
    errors: {
      cognito: null,
      blankfield: false
    }
  };

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

  clearErrorState = () => {
    this.setState({
      errors: {
        cognito: null,
        blankfield: false
      }
    });
  };

, тогда при рендеринге вы можете передать

if (this.state.showForgotPasswordVerification){
return <ForgotPasswordVerification/>
}

Лучший способ - использовать маршруты. Здесь вы можете проверить различные примеры https://reacttraining.com/react-router/web/guides/quick-start