How to pass data to a Ant Design Modal

Question

I have a simple application that pops up a ant design modal. Like this:

    render() {
    return (
        <div>
                <Menu className="parent">
                    <Menu.Item className="menu_item" onClick={DataModal} >
                        <span className="item_name">Data</span>
                        <Icon type="right" className="item_icon" style={{ float: 'right', fontSize: '1.5em' }} />
                    </Menu.Item>
               </Menu>
        </div>
     )}

When user click on the menu item it pops up the DataUsage modal which is this:

Data.js

export default function DataModal() {
    Modal.info({
        title: 'Data',
        content: (
            <div className="modal_data_wrapper">

           </div>
        ),
        style: { top: 0, height: '83vh' },
        width: '100%',
        onOk() { },
    });
}

Popup is working correctly. I need to send some data to this modal. How can I do this ?

Answer 1

You could pass it into your modal creation function. For example:

export default function DataModal(dataToPassIn) {
Modal.info({
  title: 'Data',
  content: (
    <div className="modal_data_wrapper">
      {dataToPassIn}
    </div>
  ),

Then just pass the args in when you call it:

<Menu.Item className="menu_item" onClick={() => DataModal('hello')} >