I'm using React-Admin and have a field in my database that contains linebreaks (\n). When I output this on a page like this:

<TextField source="extra_details" />

The linebreaks are ignored and everything runs together. How can I make the linebreaks show properly?

Thanks

2 Answers

0
Kosch On

What about <RichTextField />?

https://marmelab.com/react-admin/Fields.html#richtextfield

Or you could always create your own TextField component.

0
Community On

Styles may help...

import {withStyles} from "@material-ui/core/styles";

const styles = {
  displayLinebreakAndTab: {whiteSpace: "pre-wrap" },
};

const SomeText = withStyles(styles)(({classes, ...props}) => (
  <TextField
    className={classes.displayLinebreakAndTab}
    {...props}
  />
));