Scroll in React

Question

I Have a React div tag below which actually holds json tree. The problem is overflow-x for horizontal scroll is not working. I am posting the code and error below.Is there any way for horizontal scroll using css in react.Vertical scroll is automatically working if mere overflow: 'scroll' is given.

const divStyle={
        overflow-y: 'scroll',
        border:'1px solid red',
        width:'500px',
        float: 'left',
        height:'500px',
        position:'relative'
      };

<div style={divStyle}>
                    <Droppable
                        types={['yolo']}
                        style={droppableStyle}
                        onDrop={this.onDrop.bind(this)}
                        onDragEnter={this.onDragEnter.bind(this)}
                        onDragLeave={this.onDragLeave.bind(this)}>
                        <div style={{textAlign:'left', lineHeight:'100px' ,overflow:'scroll'}}>{this.state.dropped}</div>
                    </Droppable>
                </div>

strong text tag(parent) overflow-x if given it gives error as below.

./src/Drag.js Syntax error: Unexpected token, expected , (38:16)

36 | render() { 37 | const divStyle={

38 | overflow-y: 'scroll', | ^ 39 | border:'1px solid red', 40 | width:'500px', 41 | float: 'left',

Answer 1

Try this:

style={{overflowX : 'auto',fontSize: '14px'}} for inline css in reactjs.

It works fine.

All styles with a dash is converted to camel case in reactjs and remove dash.

Answer 2

Remember that divStyle is an object and object keys, just like other identifier names, such as function names, etc, cannot have dashes/hyphens unless the key is written as a string literal.

However, react recognizes only the CamelCase version, so use that instead:

const divStyle={
  overflowY: 'scroll',
  border:'1px solid red',
  width:'500px',
  float: 'left',
  height:'500px',
  position:'relative'
};

Here's a snippet from the official Reactjs docs:

The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes. For example:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}