Quiero abrir una ventana modal, cuando hago doble clic en la Fila en la Tabla y. Y pasar la propiedad a modal. Como esto:
<Table columns={columns} components={components} dataSource={dataSource} onRow={(record) => { return { onDoubleClick: () => { return <ModalWindow props={record} /> // or return <ModalWindow> {record.name} </ModalWindow> } } }} />El problema es que no se devuelve jsx. Puedo guardar en el estado, como aquí:
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} /> }pero ese no es mi camino. Ayudame por favor.
Puede manejar su requerimiento usando un Modal y actualizando el contenido de modal haciendo doble clic en cada fila, así:
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> </> ); }He implementado un ejemplo aquí en stackBlitz , puedes comprobarlo.