ReactJS - How to accept HTML attribute data-, aria-?

Question

I'm having a litte problem while creating a dropdown menu with bootstrap, in document https://facebook.github.io/react/docs/tags-and-attributes.html has said React supports all data-* and aria-* attributes as well as every attribute in the following lists, all attributes are camel-cased...

EX:

React.DOM.div(
   {
      className: 'dropdown', // available
      dataToggle: 'dropdown', // not available
      ariaExpanded: true // not available
   }
)

when run, attribute data-* and aria-* same not available?? i don't know why so???What could I do?

Thanks in advance.

dreamingblackcat · Accepted Answer · 2015-07-22 05:51:33Z

1

Short Answer: just use normally as

data-toggle: 'dropdown'

According to React Docs:

All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style. We intentionally break with the spec here since the spec is inconsistent. However, data-* and aria-* attributes conform to the specs and should be lower-cased only.

You can look it at here

I've added a quick JSFiddle that make use of data attributes with JSX. I know it was quite messy (it was the best I come up with shorted amount of time).But you can see the use of data attribute with react in action.

edited Jul 22, 2015 at 5:51

answered Jul 22, 2015 at 5:41

dreamingblackcat

9915 silver badges9 bronze badges

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

Comments

Zeeshan · Accepted Answer · 2017-06-20 10:07:29Z

0

Try using it as follows:

React.DOM.div(
{
  className: 'dropdown',
  'data-toggle': 'dropdown',
  'aria-expanded': true
})

edited Jun 20, 2017 at 10:07

answered Jun 19, 2017 at 10:46

Zeeshan

1051 gold badge1 silver badge6 bronze badges

Collectives™ on Stack Overflow

ReactJS - How to accept HTML attribute data-, aria-?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related