The following works great in my function:
console.log(theme.colors.blues[1]);
I'm trying to make the last part dynamic like so:
const getColor = (theme, passedColorProp) => {
console.log(theme.colors.[passedColorProp]);
};
getColor("blues[1]");
This is currently erring with:
Module build failed: SyntaxError: Unexpected token (15:27)**
How can I make this work?
You're almost there, you access a property dynamically exactly how you've done it except you don't need the extra dot.
const getColor = (theme, passedColorProp) => {
console.log(theme.colors[passedColorProp]);
};
Note that this works for a SINGLE property, but you can't nest it as you have in your example, for that you'll need to use two different variables:
const getColor = (theme, passedColorProp, id) => {
console.log(theme.colors[passedColorProp][id]);
};
const theme = { colors: { blues: ['something', 'something else'] } };
getColor(theme, 'blues', 1); // 'something else'
Use String.match() with a regex to extract the keys, then iterate them with Array.reduce() to get the values:
const theme = {
colors: {
blues: ['blue0', 'blue1']
}
};
const getColor = (theme, passedColorProp) => {
const keys = passedColorProp.match(/[^\[\].]+/g); // match a sequence of everything but [ ] or .
return keys.reduce((r, k) => r[k], theme);
};
console.log(getColor(theme, 'colors.blues[1]'));
Cannot read property '1' of undefined
theme.colors.blues is returning undefined. As you can see it works in the snippet.