I'm creating a blog using React and I would like to add a <br /> tag inside the body key of my posts's array.

For example:

body: "JavaScript is the world most popular <br/> 
       lightweight, ...

Is it possible to do this?

I've tried to find a way but nothing is working.

const blogPosts = [
    {
      title: "JAVASCRIPT",
      body: `JavaScript is the world most popular <br/>
      lightweight, interpreted compiled programming 
      language. It is also known as scripting 
      language for web pages. It is well-known for 
      the development of web pages, many non-browser 
      environments also use it. JavaScript can be 
      used for Client-side developments as well as 
      Server-side developments`,
      category: "",
      altImg: "description de la photo",
      imgUrl: maphoto,
    },
    {
      title: "Data Structure ",
      body: `There are many real-life examples of 
      a stack. Consider an example of plates stacked 
      over one another in the canteen. The plate 
      which is at the top is the first one to be 
      removed, i.e. the plate which has been placed 
      at the bottommost position remains in the 
      stack for the longest period of time. So, it 
      can be simply seen to follow LIFO(Last In 
      First Out)/FILO(First In Last Out) order.`,
      category: "toto",
      altImg: "description de la photo",
      imgUrl: maphoto2,
    },
]

CodePudding user response：

const stringToBreakpointedHtml = (string) => {
  return (
    <>
      { string.split('<br/>').flatMap((section, index) => [section, <br key={'breakpoint-'   index}/>]) }
    </>
  );
}