Material-UI CardContent not rendering the jump lines-CodePudding

I have a component that renders a Material-UI Card, it receives a string like this:

'This
is
a
test'

But it renders 'This is a test' in one single line. I tried this:

<Card>
  <CardContent>
     <Typography noWrap>{value}</Typography>
  </CardContent>
</Card>

and

<Card>
  <CardContent>
     {value}
  </CardContent>
</Card>

both of them renders the value in a single line, however, if I console.log(value); then it shows the message as expected on the console.

How to overcome this?

CodePudding user response：

You can use