Откройте всплывающее окно в реакции

Question

Я хочу открыть всплывающее окно, когда я нажимаю кнопку на реагировать, у меня есть это, но всплывающее окно не появится:

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target={`#${props.idMessage}`}>
                {props.idMessage}
            </button>


            <div class="modal fade" id={props.idMessage} tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

Используя инструменты отладки реагирования, я вижу, что props.id очевидно отличаетсяот каждого из них, и значение на моей цели данных совпадает с моим идентификатором, как вы видите, должно появиться всплывающее окно:

Answer 1

Вот современный способ добиться этого, используя React Hooks

import React, { useState } from "react";

const PopUp = ({ idMessage }) => {
  // create state `open` with default as false
  const [open, setOpen] = useState(false);
  return (
    <>
      {/* click of button toggles `open` value therefore visibility */}
      <button
        onClick={() => setOpen(!open)}
        type="button"
        className="btn btn-primary"
        data-toggle="modal"
        data-target={`#${idMessage}`}
      >
        {idMessage}
      </button>
      {/* If open is true show your <div /> */}
      {open && (
        <div
          className="modal fade"
          id={idMessage}
          tabIndex="-1"
          role="dialog"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          content
        </div>
      )}
    </>
  );
};

export default PopUp;

Answer 2

Как насчет этого:

class PopUp extends Component {
 constructor(props) {
    super(props);
    this.state = {
        hide: false
    };
 }
 clicked(){
     this.setState({
       hide: true
     });
 }
 render() {
     return (
        <div>
        <button type="button" class="btn btn-primary" data-toggle="modal" onClick={() => this.clicked()} >
            Click Me
        </button>
        {
          this.state.hide? 
              <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">Required PopUp </div>
              : null
        }
        </div>
     );
  }
}

Вы можете использовать это как <PopUp> в своем коде