String parsing (\n)

💡 Examples of how to parse a string to display it in multiple paragraphs in the user interface.

Code

Option I

const text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.\nFusce rutrum ante eu varius ullamcorper.\nFusce dapibus urna maximus sapien faucibus egestas.";

const desc = text.trim().split('\n').map((str, index) => (
        <p key={index}>
            {str}
        </p>
));

return (
     <div>
       {desc}
     </div>
);

Option II

const Description = React.forwardRef<HTMLSpanElement, { str: string; }>
(({ str }, ref) => (
  <Typography 
      ref={ref} 
      whiteSpace="pre-wrap" 
      fontSize={14} 
      fontWeight={500}
	>
    {str}
  </Typography>
));

return (
     <Description str={desc?.trim()} />
);

Toggle dark mode