Defining inline style in React, SyntaxError: Unexpected token

Question

While trying to disable scrolling on the page setting style='overflow-y: auto;':

render() {
    return (
      <div style={{overflow-y: auto}}>
        <div>{this.props.title}</div>
        <div>{this.props.children}</div>
      </div>
    );
}

Webpack is giving an error:

What could I do here? If we can not set overflow-y for some reason, then how could we disable scrolling of a web page in React app (I am also using React-Bootstrap)

Please select the answer below. (I don't get points, it's just so we know it's been answered.) — wazz
– wazz, Commented Dec 28, 2017 at 3:54

Shashith Darshana · Accepted Answer · 2017-12-28 04:02:30Z

3

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.

answered Dec 28, 2017 at 4:02

Shashith Darshana

2,8051 gold badge28 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wazz · Accepted Answer · 2017-12-28 03:53:09Z

1

From the comments, use overflowY.

answered Dec 28, 2017 at 3:53

community wiki

wazz

Comments

Rajat Dhoot · Accepted Answer · 2017-12-28 04:44:40Z

1

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

answered Dec 28, 2017 at 4:44

Rajat Dhoot

1854 silver badges17 bronze badges

Collectives™ on Stack Overflow

Defining inline style in React, SyntaxError: Unexpected token

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related