How to open modal window in React?

Question

React

I have a separate button that should open a modal, but the opening state itself is in the modal's class. How to change the state from the outside?

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
  }

  handleSubmit (e) {
    e.preventDefault();
  }

  showTradeModal = () => {
    this.setState({ isOpen: true });
  }

  closeTradeModal = () => {
    this.setState({ isOpen: false });
  }

  render() {
    return (
      <Modal isOpen={this.state.isOpen} style={tradeOptions}>
        <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2>
        <div>I am a modal</div>
        <form onSubmit={this.handleSubmit}>
          <input />
          <button>tab navigation</button>
          <button>stays</button>
          <button>inside</button>
          <button>the modal</button>
        </form>
        <button onClick={this.props.buyCurrency}>Confirm</button>
        <button onClick={this.closeTradeModal}>Cancel</button>
      </Modal>
    );
  }
}

Answer 1

class Container extends React.Component {
  state = {
   showModal: false
  }

  handleModal = () => {
    this.setState({showModal: !this.state.showModal});
  }
render() {
  return (
    <Fragment>
      { this.state.showModal && <MyModal handleModal={this.handleModal}/> }
      <button onClick={this.handleModal}> Show modal </button>
    </Fragment>
   )
}

You can open from the outside, and close the modal in the modal itself.
Similarly, you can add more fields in the state and a couple of handlers to get as many modals as you like in one component.

Answer 2

try like this

import Modal from "./Modal"

showModal(){
this.modal. showTradeModal()
}
render(){
<View>
<Button onClick={()=>this.showModal}
<Modal  ref={modal=>this.modal=modal}/>
</View>
}

Answer 3

https://reactjs.org/docs/portals.html
Check out. documentation