CODEWITHSUNDEEP
javascriptreactjs
Lukas
Lukas

Reputation: 49

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

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

Upvotes: 0

Views: 2258

Answers (3)

vincent thorpe
vincent thorpe

Reputation: 294

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'}

Upvotes: 0

thortsx
thortsx

Reputation: 2280

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

Upvotes: 1

Mart
Mart

Reputation: 311

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>

Upvotes: 3

Related Questions