score:3

Accepted answer
import React, {useState, useRef} from 'react'
import ReactDOM from 'react-dom'
import Modal from './ModalWrapper'

import {Button, Modal as AntdModal} from 'antd'

const App = () => {
  const [on, setOn] = useState(false)
  const toggle = () => setOn(!on)

  const modalRef = useRef()
  return (
    <div>
      <Button type="warning" onClick={() => setOn(true)}>
        Normal Import
      </Button>
      <br />
      <br />
      <Button type="primary" onClick={() => modalRef.current.toggleModal()}>
        From Modal Component
      </Button>

      <AntdModal visible={on} onOk={toggle} onCancel={toggle}>
        <p>I was imported directly...</p>
        <p>I was imported directly...</p>
        <p>I was imported directly...</p>
      </AntdModal>

      <Modal
        title="Simple"
        ref={modalRef}
        onOK={() => alert('Things are now OK :)')}
      >
        <p>I was imported from Modal Component...</p>
        <p>I was imported from Modal Component...</p>
        <p>I was imported from Modal Component...</p>
      </Modal>
    </div>
  )
}

const rootElement = document.getElementById('root')
ReactDOM.render(<App />, rootElement)

Related Query

More Query from same tag