React colspan not working
Solution 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
Solution 2
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} />
Solution 3
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"
.
Solution 4
I had a bit of a different case, but the final solution for me was to actually giving the th/td a display: table-cell;
property.
Tuomas Toivonen
Updated on July 09, 2022Comments
-
Tuomas Toivonen almost 2 years
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.
-
fen1x over 6 yearsIt doesn'n really matter - HTML tag names and attribute names are case-insensitive
-
Nathan Arthur over 6 years@fen1x React is a lot stricter than vanilla HTML is.
-
Priyanka Sharma over 6 years@fen1x It does matter in react, I have experienced same in my current project.
-
tatoline over 2 years@fen1x It is not HTML actually, it is called JSX which is very similar to HTML.
-
jsaddwater about 2 yearsthanks, this was my problem as well