I had a React component like this:

Notice the `marginLeft` value.

The problem I had was that my AppBar was ignoring the marginLeft value.

The reason for this was that AppBar is of position='fixed' by default (as indicated in the docs).

The Solution

Changing the <AppBar className='classes.appBar'> to <AppBar className='classes.appBar' position='relative'> resolved the issue, causing AppBar to start listening to the margin value.

Javascript expects strings as object keys.

const myObj = {
key1: 'property1'
}

What if I want my key to be dynamically set?

const myArr = ['all', 'your', 'base'];
let myObj = {};
myArr.forEach(item => {
myObj = {...myObj, item: 'property1'};
})
console.log(myObj);// This code will create an object with 'item' as the key, not the items found in the array, as we want.

The solution

The solution is quite simple. Simply add a square bracket when setting the key.

const myArr = ['all', 'your', 'base'];
let myObj = {};
myArr.forEach(item => {
myObj = {...myObj, [item]: 'property1'};
})
console.log(myObj);

Happy Coding!

Mendel Bakaleynik

Mendel Bakaleynik

FullStack Dev. Working to bring acts of goodness and kindness to the world.