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.....

Rajiv · Accepted Answer · 2020-12-09 03:14:55Z

3

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;

answered Dec 9, 2020 at 3:14

Rajiv

3,8622 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Changyukyung Over a year ago

Wow Thx!! I succeeded button click open modal! By the way, Modal component is I tried use it global&reusable component. Maybe another component in call Modal component, then Open Cancel Ok same function all the time declaration?

Rajiv Over a year ago

I can't understand your question completely. But as I understand it, you don't need to need to pass all the functions and then add them to in global component. Instead you can spread the props in BtnModal like this, <Modal {...props}>lorem</Modal> . In this, you don't need to add the functions manually.

Collectives™ on Stack Overflow

React button onClick event call other component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related