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.

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.

• javascript
• reactjs

• 3 try 'aria-hidden' instead of ariaHidden – Karol Klepacki Commented Aug 17, 2016 at 14:12
• Likewise use data-backdrop instead of dataBackdrop. Data attributes have to start with the data- prefix for React to pass them through. – Ross Allen Commented Aug 17, 2016 at 16:54
• 2 It seems perverse for React to issue warnings against hyphenated prop names, and in other cases warn against camel-cased prop names! Why not be consistent and require ariaHidden etc? – pwray Commented Oct 24, 2017 at 3:54

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