Entities in computed attribute values? Suggested approach?

[JoshuaToenyes]

Wonderful package :) I've been using it for a year or so, and it's awesome.

Question on usage when rendering a computed attribute that contains an ampersand (&). React likes to escape that to &... any suggested workarounds?

This is the use case:

<Meta
  property="og:image"
  content={imageUrl + '?height=630&width=1200'}
/>

The content attribute ends up looking like this when rendered with ReactDOM.renderToStaticMarkup:

content="https://example.com/image.jpg?height=630&width=1200"

Thanks!

[tizmagik]

Hey thanks for the nice note :)

I think what you're running into is React's auto-escaping by default? There's some ways around that documented here: https://shripadk.github.io/react/docs/jsx-gotchas.html -- does that help?

[JoshuaToenyes]

Hi, @tizmagik – Sorry for the delayed response. Yes, I read through that. Unfortunately, I don't see a workaround for attributes. dangerouslySetInnerHTML is the closest... but isn't for attributes.

Unless I missing something obvious... Work correctly in the browser, just not with renderToStaticMarkup.

[tizmagik]

Oh interesting, hmm... do you know if the problem is specific to react-head or to renderToStaticMarkup?

[JoshuaToenyes]

I've got something going on with my GitHub notifications because I never get a notice when you respond...

Looks like it's an issue with ReactDOM's renderToStaticMarkup. Here's a runkit:
http://runkit.com/joshuatoenyes/reactdom-ampersand-test

Which leads me back to the workaround... Seem's like this is definitely a JSX "gotcha."

So unless there's some known workaround that I'm not aware of (which seems like the case), I think the only solutions are:

a) not include ampersands in URL's (what I'm doing now)
b) build a custom React renderer for React Head that doesn't escape in SSR

I'll fix my notifications :) cheers.

[JoshuaToenyes]

It looks like React Helmet can allow special characters in generated SSR output by flipping the encodeSpecialCharacters property to false.

They're manually building the tag strings:
https://github.com/nfl/react-helmet/blob/420810c644f94c3743f7b088321dbd62a8037b7b/src/HelmetUtils.js#L514

Obviously a more complex approach than React Head takes.

I'm going to close this issue by noting for posterity that React Head doesn't support this particular corner case since all rendered components for SSR are piped through React and therefore subject to React's JSX escaping rules.

Thanks!