React button onClick event call other component

Question

I want to click button then show modal event but this code is not showing modal and no reaction
So I tryed add code {()=>BtnModal()} arrowfunction but same not reaction. And I search other solution this keyworld add, but functional component is not used this keyworld. How can I solve the problem?

Modal.js (I used antd design)

import { Modal } from 'antd';

function BtnModal(){
  const [modal2Visible,setModal2Visible]=useState(true);

  return (
    <>
      <Modal
        title="Modal"
        centered
        visible={modal2Visible}
        onOk={() => setModal2Visible(false)}
        onCancel={() => setModal2Visible(false)}
      >
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed dolorem ratione qui iste.<br />
      Dignissimos nisi sint rerum numquam obcaecati voluptatem quidem, quasi rem,<br />
      veritatis voluptatum omnis excepturi, fugit quia harum?</p>
      </Modal>
    </>
  );
};

export default BtnModal;

Header.js

import BtnModal from './BtnModal';

function Header() {
  return (
    <>
    <div className="Head-wrap">
      <span>Header</span>
    </div>
    <div className="btn-list">
      <button onClick={BtnModal}>TestBtn</button>
    </div>
  </>
  );
};

export default Header;

I am trying to solve this problem.TT I am trying to solve this problem.....

Answer 1

First of all, you can not call a component on the click of a button. Instead set a state and render the component conditionally according to the state value, and set the state when the component needs to be rendered.

In your problem create a state in Header.js for maintaining the open/visible state of the Modal and set that state accordingly on the onClick of the button. Then pass that state to the BtnModal as a prop and then assign that prop value to the Modal's visible prop.

Modal.js

import { Modal } from 'antd';

function BtnModal({visible, onCancel, onOk}){
  return (
    <>
      <Modal
        title="Modal"
        centered
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
      >
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed dolorem ratione qui iste.<br />
      Dignissimos nisi sint rerum numquam obcaecati voluptatem quidem, quasi rem,<br />
      veritatis voluptatum omnis excepturi, fugit quia harum?</p>
      </Modal>
    </>
  );
};

export default BtnModal;

Header.js

import BtnModal from './BtnModal';

function Header() {
  const [modal2Visible,setModal2Visible]=useState(true);

  const handleModalOpen = () =>{
    setModal2Visible(true)
  }
  
  const handleCancel = () =>{
    setModal2Visible(false)
  }
  const handleOk = () =>{
    setModal2Visible(false)
  }

  return (
    <>
    <div className="Head-wrap">
      <span>Header</span>
    </div>
    <div className="btn-list">
      <button onClick={handleModalOpen}>TestBtn</button>
      <BtnModal visible={modal2Visible} onCancel={handleCancel} onOk={handleOk}/>
    </div>
  </>
  );
};

export default Header;