Preserving line breaks with React-Admin / Material UI's Textfields?

Question

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

Answer 1

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 component.

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