Skip to content Skip to sidebar Skip to footer

Defining Inline Style In React, Syntaxerror: Unexpected Token

While trying to disable scrolling on the page setting style='overflow-y: auto;': render() { return (
{this.props

Solution 1:

The style attributes should be in camel case according to the documentation.

So anywhere we delimit the words with hyphen (-) in normal css we should use change them to camel case when we use it inside a react style object.

For example.

overflow-y -> overflowY
overflow-x -> overflowX
background-image -> backgroundImage

We insert the styles as an object.

so the css properties will be attributes of an javascript object.

hyphen(-) is an illegal character when defining javascript object attributes or variable names. That's why it should be used in camel-Case.

Solution 2:

You cannot use <div style={{overflow-y: auto}}>

You have to convert it into camelCase like <div style={{overflowY: auto}}>

For details you can Check react official document Here https://reactjs.org/docs/dom-elements.html#style

Post a Comment for "Defining Inline Style In React, Syntaxerror: Unexpected Token"