CODEWITHSUNDEEP
reactjs
Gaurav Kandpal
Gaurav Kandpal

Reputation: 1310

Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?

I want to set a tabindex in react which giving me a warning : "Warning: Invalid DOM property tabindex. Did you mean tabIndex?".

My code is :

<Nav.Item key={label}>
      <Nav.Link tabindex={index+1} > Test  </Nav.Link>
</Nav.Item>

When I am using tabIndex there is no error but its not working While I am using like shared code its working but giving warning I want to remove that warning.

Upvotes: 1

Views: 11074

Answers (2)

Karthick B
Karthick B

Reputation: 118

Official React docs says

In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute tabindex corresponds to the attribute tabIndex in React. The exception is aria-* and data-* attributes, which should be lowercased. For example, you can keep aria-label as aria-label.

All the DOM attributes in React should be in camelCase. For example,

className="btn btn-primary" instead of classname="btn btn-primary".

In your case it should be strictly tabIndex instead of tabindex

Upvotes: 2

kooskoos
kooskoos

Reputation: 4859

Attributes in reactjs follow camelCase. Hence the warning. And use tabIndex in <Nav.Item> instead of <Nav.Link>

<Nav.Item key={label} tabIndex=`${index+1}` >
      <Nav.Link> Test  </Nav.Link>
</Nav.Item>

Check out the https://codesandbox.io/s/billowing-sun-n969i

It works perfectly fine when you use tabIndex with <Nav.Item>

Upvotes: 3

Related Questions