React colspan not working
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/react@15.2.1/dist/react.js"></script><script src="https://npmcdn.com/react-dom@15.2.1/dist/react-dom.js"></script><script src="https://npmcdn.com/babel-core@5.8.38/browser-polyfill.min.js"></script><script src="https://npmcdn.com/babel-core@5.8.38/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
In addition to changing the case, I also had to change the value from a string to a number.
Instead of this:
<td colspan='6' />I had to do this:
<td colSpan={6} />
colspan property is in camelCase like colSpan. So instead of colspan we need to use colSpan.
In React v16.12 you can still supply the value as either int, like so colSpan={4} or string, like so: colSpan="4".