Render key as html property in React

Question

I'm using React and need to render meta tag with non-standard properties.

Since key property is special in React, React won't propagate it to children and it won't render it. How can I work around this? I know React will pass any unknown property to HTML tag but I can't use data-key (for example), I need to render key property specifically.

I'm using React Helmet and don't have control over head element therefore I can't do

'}}>

I also can't use React refs because I'm rendering this on server-side (and client-side) and doesn't have access to components lifecycle nor reference to DOM element.

EDIT: I modified original answer to exclude any reference to Typescript because question is about React, not Typescript.

user_10761855 · Answer

try this, it's work for me:

const someMeta = {
    "data-one": "one",
    "data-two": 2
};

text

if you need key in response from server render for example, you can try dangerouslySetInnerHTML https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

my example:

https://codepen.io/anon/pen/ebVzZm

user_7154364 · Answer

You can achieve this using the following, in your doctype declaration, you can add

]>

Where myAttri is your attribute, you can name it key to match what you want.

#IMPLIED means that it's optional. If you want it on every single element, you can use #REQUIRED

You can also try setting the attribute through js with

document.getElementById("foo").myAttri = "myVal"

Render key as html property in React

2 Answers