Using aria attributes on elements in react

Question

I have the following render method:

render: function () {
  return (
    React.createElement('div', {className: 'modal', id: 'errorModal', tabIndex: '-1', role: 'dialog', ariaHidden: 'true', dataBackdrop: 'false', style: {marginTop: '30px'}}, 'text')
  )
}

That gives me error:

react.js:20541 Warning: Unknown props ariaHidden, dataBackdrop on tag. Remove these props from the element. For details, see in div (created by Constructor) in Constructor

How could I solve this? Documentation says that I can use these attributes. Lowercase does not work either. I don't want to use jsx.

Answer 1

Instead of camel case, use hyphens to define aria attributes as described in React's docs:

render: function () {
  return (
    React.createElement('div', {className: 'modal', id: 'errorModal', tabIndex: '-1', role: 'dialog', 'aria-hidden': 'true', dataBackdrop: 'false', style: {marginTop: '30px'}}, 'text')
  )
}