We help IT Professionals succeed at work.

Javascript let variable hold multiple CSS properties

Dilen Pat
Dilen Pat asked
on
133 Views
Last Modified: 2017-11-11
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

CERTIFIED EXPERT
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

CERTIFIED EXPERT
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
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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?
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

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

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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

Open in new window

Width style requires a unit