React colspan not working

Question

Why colspan attribute doesn't have effect in React? I created simple component which renders the following:

<table border="1">   <tr>     <th colspan="2">people are...</th>   </tr>   <tr>     <td>monkeys</td>     <td>donkeys</td>   </tr> </table> 

and what I get is:

Am I missing something?

Edit: SOLVED

Here is the solution. React expects the attribute name as colSpan, not colspan. Figured this out after wasting ridiculous amount of time to discover this little evil fact.

Answer 1

From React's DOM Differences documentation:

All DOM properties and attributes (including event handlers) should be camelCased to be consistent with standard JavaScript style.

If you check your browser's console, you'll see that React warns you about this:

<meta charset="UTF-8">  <script src="https://npmcdn.com/[email protected]/dist/react.js"></script>  <script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>  <script src="https://npmcdn.com/[email protected]/browser-polyfill.min.js"></script>  <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>  <div id="app"></div>  <script type="text/babel">    var App = React.createClass({    render() {      return <table border="1">        <tbody>          <tr>            <th colspan="2">people are...</th>          </tr>          <tr>            <td>monkeys</td>            <td>donkeys</td>          </tr>        </tbody>      </table>    }  })    ReactDOM.render(<App who="World"/>, document.querySelector('#app'))    </script>

Warning: Unknown DOM property colspan. Did you mean colSpan?     in th (created by App)     in tr (created by App)     in tbody (created by App)     in table (created by App)     in App