How to add custom attributes in an element without JSX (just using createElement method)?

Question

I want add a custom attribute (for instance an attribute named "key") in an element using React but I only can add some keywords like "className", "style", etc...

My code right now is like this:

function TodoItem(props){
    return React.createElement("div",{key:props.id,className:"todo-item"},
        React.createElement("input",{type:"checkbox"},null),
        React.createElement("p",null,props.text)
    );
}

I can not add "key:props.id".

My objective would be to create something like this:

<div class="todo-item" key="<int>" data-reactid=".0.0"><input type="checkbox" data-reactid=".0.0.0"><p data-reactid=".0.0.$test">Take out trash</p></div>

Right now I do not know how to put the key="int" part

key won't appear as an attribute of the resulting HTML element. If you really want it to appear in the page, you could use 'data-key' as the prop name. — Emile Bergeron
– Emile Bergeron, Commented Oct 1, 2019 at 17:05
Possible duplicate of stackoverflow.com/questions/31273093/… — Asons
– Asons, Commented Oct 1, 2019 at 17:05
@EmileBergeron That worked! I could add the "data-key" attribute, however I have a warning that says "Warning: Each child in an array or iterator should have a unique "key" prop", I was trying to add a property called "key" to get rid of that warning.. — Lukas
– Lukas, Commented Oct 1, 2019 at 17:10

Mart · Accepted Answer · 2019-10-01 17:31:16Z

3

Just curious, why you dont want to use jsx?

If you want to see the translation you can visit babeljs.io

for example:

function Comp() {
    return <div myprop="prop" />
}

results to:

function Comp() {
 return React.createElement("div", {
    myprop: "prop"
  });
}

And, since i cannot comment yet. key word is reserved as mentioned. So use key so react can render smarter, and some other propname if you want to pass your own stuff.

Edited:

So to have your component as it should be with arrays, do it like so.

function NoJSX(props) {
  return React.createElement(
    "div",
    {
      key: "ishouldbeunique", // a unique value, specially for React
      myKey: "icanbeeverything" // whatever you want
    },
    props.children
  );
}

will result in:

<div myKey="icanbeeverything">test me</div>

edited Oct 1, 2019 at 17:31

answered Oct 1, 2019 at 16:43

Mart

3111 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Lukas Over a year ago

For what I know I need to parse the JSX to be converted to js, right now I want to jump that part and just use vanilla javascript while learning React. I will eventually in the future use JSX.

Mart Over a year ago

With create-react-app all that stuff is handled for you. I love JSX, give it a chance is my advice :) Or, if that is a step to far, you can mess around with codesandbox.io.

Lukas Over a year ago

Yeah I know that JSX is one of the best features of react, I was thinking to use that later, but it seems that since I got this problem with vanilla javascript it is a good opportunity to start using JSX and get the problem solved. However it would be nice to have an answer to this question. Thanks for the tips anyway :)

Mart Over a year ago

What do you mean by I can not add "key:props.id" for me it works fine, check here: codesandbox.io/s/wonderful-river-zr9kb

Lukas Over a year ago

Maybe I did not see right but I do not see the "key" attribute in the created element...

|

Emile Bergeron · Accepted Answer · 2019-10-01 19:23:13Z

1

The following example uses the key prop and so, it will not show the warning.

function TodoItem({ arr }) {
  return arr.map(item =>
    React.createElement(
      "div",
      {
        key: item.id, // <--- Put the key prop here.
        className: "todo-item"
      },
      React.createElement("input", { type: "checkbox" }, null),
      React.createElement("p", null, item.text)
    )
  );
}

const data = [
  { id: 1, text: "Box 1" },
  { id: 2, text: "Box 2" }
];

const rootElement = document.getElementById("root");
ReactDOM.render(React.createElement(TodoItem, { arr: data }), rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

key:props.id: I see it still ok with me

edited Oct 1, 2019 at 19:23

Emile Bergeron

17.5k5 gold badges85 silver badges133 bronze badges

answered Oct 1, 2019 at 17:08

thortsx

2,2802 gold badges15 silver badges32 bronze badges

2 Comments

Lukas Over a year ago

Thanks for the help! That is what I was exactly looking for. Right now I am not in the computer but later I will try to adapt your code to my problem and try to solve it.

Emile Bergeron Over a year ago

I moved the codesandbox example to a on-site stack snippet since your answer was incomplete without the code itself. I changed it a little to focus on the solution and reduced the noise and duplication around it. Feel free to edit it to your liking. Sorry if it changed too much ;)

vincent thorpe · Accepted Answer · 2021-06-18 21:21:14Z

Using data attributes

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes...

According to developer.mozilla.org if you want to specify a custom attribute, use data-[customName] like data-key in your case.

Use this format: 'attribute':'key'

var elm = React.createElement(
    /* element          */ 'h1'
    /* custom attribute */ ,{'data-key': 'todo-item'}
    /* innerHTML        */ ,'Hello'
)

ReactDOM.render(
   elm,
   document.getElementById('root')
)

HTML DOM Result:

<div id="root">
   <h1 data-key="todo-item">Hello</h1>
</div>

If you want to add class attribute use commas {'data-key': 'todo-item', className: 'myClass'}

Collectives™ on Stack Overflow

How to add custom attributes in an element without JSX (just using createElement method)?

3 Answers 3

7 Comments

2 Comments

Using data attributes

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related