How to use newline in Notification with antd

Question

I tried to use \n in my notification's decription but it did not work. what should I use instead.

notification.warning({
    message: 'Notification Title',
    description:
      'This is the content of the notification.\n This is the content of the notification. This is the content of the notification.',
  });

Dorseydorsiferous

Answer 1

It's quite simple. Just use HTML instead of a string.

notification.warning({
  message: 'Notification Title',
  description: (
      <>
         This is the content of the notification.<br />
         This is the content of the notification. This is the content of the notification.
      </>
  ),  
});

Here I made a demo for you.

Bartender

Answer 2

For anyone who receives the "\n" from a backend API call, like an error handling situation, you could make a split on the "\n" character and then map it into html fragments with <br/> inside as such:

notification.warning({
   message: message,
   description: (<>
       {description.split("\n").map(e => {return(<>{e}<br/></>)})}
   </>)
});

Just be aware that if the call returns a value with an actual "\n" as part of the data, you'll need to find a better suit to only split the right ones.

Lael