Javascript let variable hold multiple CSS properties

Dilen Pat
Dilen Pat used Ask the Experts™
on
I have some CSS properties that have been repeated 3 times. I want to have a Let variable hold the properties so I wont need to repeat the same thing over and over. But for some reason it does not work, can anyone help?

Example code below:
...
let defaultCommonWidth = 200;
   
_columns.push({
   width:defaultCommonWidth,
   textAlign:'left'
})

_columns.push({
   width:defaultCommonWidth,
   textAlign:'left'
})

Open in new window


My attempt to create a let variable to hold all the common CSS properties

...
let defaultCommonWidth = 200;
let myvariable=[{
   width:defaultCommonWidth, 
   textAlign:'left'
}];


_columns.push({
   style: myvariable
})

_columns.push({
   style: myvariable
})

Open in new window


However, when the webpage refreshes, the columns lose their width and aligment properties
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017

Commented:
The let declare hold the variables inside a block  of function.I think tha you must use return state.Try:

...
let defaultCommonWidth = 200;
let myvariable=[{
   width:defaultCommonWidth, 
   textAlign:'left'
}];


return _columns.push({
   style: myvariable
})

return _columns.push({
   style: myvariable
})

Open in new window

Distinguished Expert 2017

Commented:
Is it working?

Author

Commented:
Ah sorry, I should add that this is part of a bigger function to manipulate _columns variable (for a React datagrid table). There is a return already at the bottom of the function which just returns _column
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
This looks like a configuration that something else is consuming - what is it that uses _columns?

Are you sure that the style property is being used correctly?

We are not exactly comparing apples with apples here - your first snippet of code and the second are completely different.

Unless you can show us what uses _columns we cannot help you.

Author

Commented:
_column is an empty array which will contain properties that will populate an existing React-datagrid table (which I'm learning how it works). Pushing CSS properties seems fine when done directly or with a variable with a single CSS property value like in the below example:

let defaultCommonWidth = 200;

_columns.push({
  height: 200,
  width: defaultCommonWidth
}]

Open in new window


However, if I want to have the variable hold multiple CSS properties (i.e. the property AND it's value), then I believe I need to use the style property and use the variable as the value i.e.

_columns.push({
   style: myvariable
})

Open in new window


But this doesn't work. I don't understand why. I even used a single property in the variable like

let myvariable = {width:200};

Open in new window

but even this simple example doesn't work. Am I using style wrong?
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Can you post a link to documentation that describes this?

Author

Commented:
The code related to the React-datagrid is shown here: https://github.com/zippytech/react-datagrid/blob/master/README.md

The issue as I understand is how to use a variable for a CSS property value so I don't know if this is going off on a tangent?
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Ok that makes it clearer.

From their docs
var data = [...]
var columns = [
  {
    name: 'firstName',
    className: 'first-column',
    textAlign: 'center',
    style: { fontWeight: 'bold' }
  },
  {
    name: 'lastName',
    render: function(value){
      return <span>
        <b>Last name:</b> value
      </span>
    }
]

Open in new window


Key bit is this one
    style: { fontWeight: 'bold' }

Open in new window


What you did
let defaultCommonWidth = 200;
let myvariable=[{
   width:defaultCommonWidth, 
   textAlign:'left'
}];

_columns.push({
   style: myvariable
})

Open in new window

What you should have done
let myvariable={
   width:defaultCommonWidth, 
   textAlign:'left'
};

Open in new window

Small difference but you put the object inside an array. As I read the docs your myvariable should just be an object with camelCase properties and values.

Author

Commented:
Sadly it still doesn't seem to be working for me unless I'm doing something wrong. Below is what I used. Refreshing the page did not have the correct width reflected. I've included a few commented lines of code. The bottom two work fine, and yet something simple like style: {width: 200}, doesn't. I feel like I am doing something stupid but I can't see what.



let myvariable={
	width:300, 
	textAlign:'left'
	};
	_columns.push({
		style: myvariable,
		//style: {width: 200},
		//width:200,
		//textAlign: 'left',
		name: 'Match Key',
		title: 'Match Key'
	});

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Shouldn't that be
{width: '200px'}

Open in new window

Width style requires a unit

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial