React：如何显示带有换行符的JSON键值对？

Question

I have the following component with a function called onClickBtn() that contains another function called textBuilder() which iterated through a JSON object filled with data from a form. I am using an email service to programatically send an email when the submit button is clicked. The only issue is that my email's Body value ends up looking like this in the email:

name: Dean age: 26 email: dean@aol.com styles: Color locations: Right Leg specificLocation: fasdfasdfa description: fdghjdghj budgets: $1000-$1500 days: Wednesday months: June  

Instead of:

name: Dean 

age: 26 

email: dean@aol.com 

styles: Color 

locations: Right Leg 

specificLocation: fasdfasdfa 

description: fdghjdghj 

budgets: $1000-$1500 

days: Wednesday 

months: June  

Below is my component. Can someone tell me what I am doing wrong?

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
  button: {  margin: theme.spacing(1), },
  input: { display: 'none', },
}));

export default function ContainedButtons(props) {
  const classes = useStyles();  

  const onClickBtn = () => {

    const textBuilder = () => {
      var doc = "";
      for (const key in props.values) {
       doc += key + ": " + props.values[key] + "\n";      
      }
      return doc;
    } 

    window.Email.send({
      Host : "smtp.elasticemail.com",
      Username : "dfmmalaw@gmail.com",
      Password : "d2296492-2689-49f7-ae3d-584f1507d23a",
      To : 'dfmmalaw@gmail.com',
      From : "dfmmalaw@gmail.com",
      Subject : "This is the subject",
      Body : textBuilder()
  }).then(
    message => alert(message)
  );
  };

    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = {!props.isEnabled} type="submit" onClick={onClickBtn}>
          Submit
        </Button>
      </div>
    );
}

Answer 1

It's because your email client is rendering the content as HTML. So newlines are just converted to spaces. Try it with a break element, like so:

doc += key + ": " + props.values[key] + "<br/>";