I want open modal window, when i doubleClick onRow in Table antd. And pass property to modal. Like this:
<Table
columns={columns}
components={components}
dataSource={dataSource}
onRow={(record) => {
return {
onDoubleClick: () => {
return <ModalWindow props={record} />
// or
return <ModalWindow> {record.name} </ModalWindow>
}
}
}} />
The problem is that no jsx is returned. I can save in state, like here:
const [visible, setVisible] = useState(false);
const [record, setRecord] = useState([]);
<Table
columns={columns}
components={components}
dataSource={dataSource}
onRow={(record) => {
return {
onDoubleClick: () => {
setRecord(record);
setVisible(true);
}
}
}} />
{visible &&
<ModalWindow record={record} />
}
but that's not my way. Help me, please.
You can handle your requirement by using one Modal and updating content of modal with double-click on every row, like this:
function App() {
// ...
const [isModalVisible, setIsModalVisible] = useState(false);
const [activeRecord, setActiveRecord] = useState(null);
const closeModal = () => {
setIsModalVisible(false);
};
return (
<>
<Table
columns={columns}
dataSource={data}
onRow={(record) => {
return {
onDoubleClick: () => {
setActiveRecord(record);
setIsModalVisible(true);
},
};
}}
/>
<Modal
title="User info"
visible={isModalVisible}
onCancel={closeModal}
footer={null}
>
{/* render whatever you want based on your record */}
<p>{activeRecord?.name} </p>
</Modal>
</>
);
}
I've implemented an example Here on stackBlitz, you can check it out.