I had a React component like this:
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!
