@ -29,7 +29,7 @@ In React 16, we are making a change. Now, any unknown attributes will end up in
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
```js
<divtabIndex="-1"/>
<divtabIndex={-1}/>
```
This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
@ -55,10 +55,10 @@ With the new approach, both of these problems are solved. With React 16, you can
```js
// Yes, please
<divtabIndex="-1"/>
<divtabIndex={-1}/>
// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
<divtabindex="-1"/>
<divtabindex={-1}/>
```
In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
@ -120,7 +120,7 @@ Below is a detailed list of them.
* **Known attributes with a different canonical React name:**
@ -130,7 +130,7 @@ As of React 16, any standard [or custom](/blog/2017/09/08/dom-attributes-in-reac
React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the `camelCase` convention just like the DOM APIs:
```js
<divtabIndex="-1"/> // Just like node.tabIndex DOM API
<divtabIndex={-1}/> // Just like node.tabIndex DOM API
<divclassName="Button"/> // Just like node.className DOM API
<inputreadOnly={true}/> // Just like node.readOnly DOM API