React – n of my JSON.String disappears after getting put in div

In my NFTDetails component is a description that comes out of a JSON. There are nn in it. There is no new line when I use the value of the JSON in a div, but there are new lines in the Firefox console when I console.log() it.

How can I use the n to display new Lines in my div.

NFTDetails.jsx – Snippet

const NFTDetails = ({nfts}) => {
  const { id } = useParams();
  const navigate = useNavigate()

  const metadata = useMemo(
    () => nfts.find((nft) => String(nft.id) === id),
    [nfts, id]
  );

  return (
    <div className="NFTDetails">
        <div className="TextCard">
          <div className="NFTCName">{metadata.name}</div>
          <div className="Description">
            <p className='DescriptionText'>Description:</p>
            <p>{metadata.description}</p>
          </div>
       </div>

metadata.description(JSON)

{
   "description":"🧬 CLONE X 🧬nn20,000 next-gen Avatars, by RTFKT and Takashi Murakami 🌸nnIf you own a clone with even one Murakami trait please read the terms regarding third-party content here: https://rtfkt.com/legal-2B.nnYou are not entitled to a commercial license if you own an avatar with any traits created by Murakami."
}

Answer

use white-space: pre-line; to leave whitespaces as in description

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space