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 ?
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 ?
Share Improve this question asked Mar 6, 2019 at 3:18 isuruAbisuruAb 2,2405 gold badges28 silver badges39 bronze badges1 Answer
Reset to default 6You 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')} >