Using grid-template-columns in ReactJS, inline style

Question

Im trying to use the CSS grid in a React component, but I get an error in the first dash of grid-template-columns, any ideas why this happens?

<div style={{display:'grid', grid-template-columns: '1fr 1fr'}}>

Answer 1

From the docs,

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.

In React, inline style uses camelCase name for CSS properties without -, like

<div style={{display:'grid', gridTemplateColumns: '1fr 1fr'}}>