How to use this as class component

[jonatanklosko]

How to use this as class component

[CycoPH]

Here is some code:
There is a Component that uses the to show a button. When you press the button it will ask you a question. With a positive reply the doAction is called

import React from 'react';
import HistoryDialog from './HistoryDialog';

class MonitorPageContainer extends React.Component {

	doAction = () => {
		console.log("You confirmed something);
	}
	render() {
		return (
			<>
				<HistoryDialog doAction={this.doAction} />
			</>
		)
	}
}

So that would be React.Component base.

Here is my HistoryDialog.js:

import React, { useState, useEffect } from 'react';
import { useConfirm } from 'material-ui-confirm';
const HistoryDialog = ({doAction}) => {
    const askSomething = async () => {
		try {
			await confirm( {
				description: `Are you sure you want to do that?`,
				confirmationText: "Yes switch state",
			});
			doAction();
		}
		catch(ex) {
		}
	}

	return (
		<Button variant="contained" onClick={askSomething }>Click to confirm</Button>
	)
}
export default HistoryDialog;

[jonatanklosko]

Hey, initially this package exposed a HOC and supported classes, but I moved to a more modern and simpler to use API and it does support functional components only.

either we have to change class component to functional component but that will be lengthy

How is a functional component lengthy as compared to the class alternative? It's usually the other way round ^^

Anyway, if you prefer HOC you can still create one. See a sample withConfirm in this demo.