Is it possible to create mui Dialog without jsx ,just using JavaScript , mui Dialog and react/reactDom?

Question

I wanted to create mui Dialog just using mui-core , react , reactDom

without jsx syntax, wanted to created dialog

Answer 1

Use React.createElement instead of JSX.

Example:

import Button from '@mui/material/Button';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import Dialog from '@mui/material/Dialog';
import {createElement, useState, Fragment} from 'react';

export default function Demo() {
  const [open, setOpen] = useState(false);
  return createElement(Fragment, {},
    createElement(Button, {onClick(){setOpen(true)}}, 'Open Dialog'),
    createElement(Dialog, {open, onClose(){setOpen(false)}}, 
    createElement(DialogTitle, {}, "Dialog Title"),
    createElement(DialogContent, {}, "Content"))
  );
}