How to Fix React colspan Attribute Not Working?

Sometimes, we want may run into the problem where the colspan attribute isn’t being rendered with React.

In this article, we’ll look at how to fix the problem where the colspan attribute isn’t being rendered with React.

Fix React colspan Attribute Not Working?

To fix the problem where the colspan attribute isn’t being rendered with React, we should make sure we use colSpan instead of colspan as the attribute name.

Also, the attribute value should be a number.

For instance, we should write:

export default function App() {
  return (
    <table border={1}>
      <tbody>
        <tr>
          <th colSpan={2}>animal are...</th>
        </tr>
        <tr>
          <td>monkeys</td>
          <td>donkeys</td>
        </tr>
      </tbody>
    </table>
  );
}

to make sure that colSpan is added instead of colspan and 2 is in braces instead of quotes so it’s interpreted as a number.

Now the colspan should be rendered correctly.

Conclusion

To fix the problem where the colspan attribute isn’t being rendered with React, we should make sure we use colSpan instead of colspan as the attribute name.