We are looking for a way to build and display an alert dynamically. For this purpose, a form is created in DEBUG where various configurations can be made.

The following option should be available:

export interface IAlert {
  id: string,
  severity?: AlertSeverity,
  --> icon?: boolean | string | JSX.Element,
  title: string,
  description: string,
  variant?: AlertVariant,
  color?: AlertSeverity
}

const initialFormData: IAlert = {
  id: useId(),
  severity: AlertSeverity.SUCCESS,
  --> icon: <CheckIcon fontSize="inherit" />, //option1
  --> icon: '<CheckIcon fontSize="inherit" />', //option2
  --> icon: false, //option3
  title: 'debug.alert.demo.msg.title',
  description: 'debug.alert.demo.msg.desc',
  variant: AlertVariant.STANDARD,
  color: AlertSeverity.INFO
};

return (
  <Snackbar anchorOrigin={{ vertical: 'top', horizontal: 'right' }} open={isAlert} onClose={(event) => { handleClose(event, opts.id) }} autoHideDuration={autoHideDuration}>
    <AlertMui icon={opts.icon} severity={opts.severity} variant={opts.variant} color={opts.color} onClose={(event) => { handleClose(event, opts.id) }}>
      <AlertTitle>{t(opts.title)}</AlertTitle>
      {t(opts.description)}
    </AlertMui>
  </Snackbar>
);

Option1

Shows [object Object] inside form element, but is rendered right.
How do i can convert this object to a human string representation like

'<CheckIcon fontSize="inherit" />'

?

JSON.stringify, +”, ReactDOMServer.renderToString(…) wasn’t helpfully here.

Option2

Shows the string respresentation inside form, but how do i can convert this string to a JSX.Element, which can be later used to build the alert with {icon}?

Option3

How to handle boolean true/false or stringified boolean ‘true’ or ‘false’? Some tries with type castings failed. I tried to used typeof or as but didnt found the right answer for it.

Some ideas or useable ways would be great and awesome.