Option not to escape HTML in message

[Vadorequest]

Is HTML escaped in the message by default?

I'm doing the following

let message = errorsAmount > 1 ? `${errorsAmount} sont survenues.` : `Une erreur est survenue.`;
      message += `<br />Vérifiez d'avoir bien rempli tous les champs du formulaire !`;
      message += `<br />Champs manquants: ${map(fields, v => capitalize(v)).join(', ')}`;
      toastr.error(`Erreur`, message, {
        position: 'bottom-left', // Because in production, in the iframe, we don't see them if they're on top
        escapeHtml: false,
      });

which displays this:

Am I doing something wrong? I'd assume using HTML within the message would be tolerated, maybe through a flag if not enabled by default for security reasons.

[jozsefs]

Have you tried the component prop:

toastr.error(`Erreur`, {
  position: 'bottom-left',
  component: <p>Some<br/>Line<br/>Breaks</p>
})

[diegoddox]

Hi @Vadorequest, there is noescapeHtml option on any of the toasts methods and if you wanna use HTML tags you do need to use dangerouslySetInnerHTML in your custom component.

maybe something like this.

toastr.error(`Erreur`, {
  position: 'bottom-left',
  component: <p dangerouslySetInnerHTML={{ __html: 'Some<br/>Line<br/>Breaks' }} />
})

[Vadorequest]

Thank you both, I used the component option which is the intended/cleanest way.

toastr.error(title, {
        position: 'bottom-left', // Because in production, in the iframe, we don't see them if they're on top
        timeOut: fields.length * 4000, // Display the message 4s per error, so that the user has time to see all missing fields (UX)
        component: <p dangerouslySetInnerHTML={{ __html: message }} />,
        closeOnToastrClick: false,
      });

[Vadorequest]

It does generate a react warning though:

Warning: Invalid value for prop remove on <p> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM. For details, see https://fb.me/react-attribute-behavior
in p (at SimulatorForm.js:80)
in div (created by ToastrBox)
in div (created by ToastrBox)
in div (created by ToastrBox)
in ToastrBox (created by ReduxToastr)