Search code examples
javascriptreactjsjsonformatting

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 \n\n 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 🧬\n\n20,000 next-gen Avatars, by RTFKT and Takashi Murakami 🌸\n\nIf you own a clone with even one Murakami trait please read the terms regarding third-party content here: https://rtfkt.com/legal-2B.\n\nYou are not entitled to a commercial license if you own an avatar with any traits created by Murakami."
}
Solution

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

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