Dan Rubio Dan Rubio - 1 month ago 6
React JSX Question

Is there a better way than `const` to store large blocks of text?

I am making a single page web app with React. One of my pages has a large block of text like so:

const ContentText = <p>......huge block of text.......</p>


It looks very ugly in my editor and I was wondering if there was a best practice for storing large blocks of text to render on a page.

Answer

I would create a module with your text and import it. That way you shouldn't care at all what it looks like in your editor because you're not really touching that file unless you're specifically trying to edit your huge block of text.

export default `
  ....huge block of text....
`

Then where you actually use it:

import hugeText from './text/hugeText'

....

render() {
  return <p>{hugeText}</p>
}

Editors like atom and sublime also have "soft wrap" mode so you don't have a ton of horizontal scrolling.

Comments