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

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

• javascript
• reactjs
• material-ui
• react-admin

4 Answers 4

You can create your custom TextField with pre-wrap style by default:

import { FC } from "react";
import { TextField as BaseTextField, TextFieldProps } from "react-admin";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  textContent: {
    whiteSpace: "pre-wrap"
  },
});

export const TextField: FC<TextFieldProps> = (props) => {
  const classes = useStyles();

  return <BaseTextField
    className={classes.textContent}
    {...props}
  />
}
TextField.defaultProps = {
  addLabel: true,
}

Then use it as you use the vendor TextField.

Please note the addLabel option: You need it to keep the label being shown with a custom ponent.

You can have more details and sample here: https://marmelab./react-admin/Fields.html#styling-fields

I found this thread very helpful. https://github./marmelab/react-admin/issues/2403

The TextField ponent passes all its props to the underlying Typography ponent. So you can do:

<TextField ponent="pre" />

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}
  />
));

What about <RichTextField />?

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

Or you could always create your own TextField ponent.