asked on

Javascript let variable hold multiple CSS properties

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

Leonidas Dosas

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

Leonidas Dosas

Is it working?

Dilen Pat

ASKER

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

Julian Hansen

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.

Dilen Pat

ASKER

_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?

Julian Hansen

Can you post a link to documentation that describes this?

Dilen Pat

ASKER

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?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dilen Pat

ASKER

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

Julian Hansen

Shouldn't that be

{width: '200px'}

Open in new window

Width style requires a unit