Using a dictionary of color code values for CSS styles

Question

I want to use a dictionary of HTML color codes and then map over that dictionary for styles.

For example:

    const color = {
        red: "#E53D25",
        lightred : "#ED7462"
        ...
    }

Here is my mapping function; I use index to iterate through the CSS values inside the dictionary above.

            .map((stock, index) => (
                <Grid>
                    <ListItem>
                        <ListItemAvatar>
                            <Avatar style={{ backgroundColor: color[index]}}>
                                {index + 1}
                            </Avatar>
                        </ListItemAvatar>
                        <ListItemText
                            primary={stock.symbol}
                            secondary={financialData && financialData[5].filter((i) => i.symbol === stock.symbol).map(
                                filteredSymbol => (
                                    <>
                                        {filteredSymbol.company}
                                    </>
                                ))}
                        />
                    </ListItem>
                </Grid>

I try to iterating through the dictionary like this and apply color by index: style={{ backgroundColor: color[index]}}

But this does not work. How can I accomplish what I'm trying to build?

index is a number, so color[index] it will returned undefined since your color object is keyed by a color string name. What is the expected relationship between index and the color name then? If you just want the color by insertion order, then you can do Object.values(color)[index] — Terry
– Terry, Commented Mar 28, 2021 at 17:58

Rafael Buzatto de Campos · Accepted Answer · 2021-03-28 18:15:15Z

1

objects are not arrays that you can pass an index to access a value. you should provide a key matching string instead.

you would need to pass some stock property that resolves to a string that matches a color key:

// you could have a 'default' color key if stock.color is undefined
<Avatar style={{ backgroundColor: color[stock.color || 'default']}}>

thouh, given your structure you may want to create a function that takes a stock and returns a color for some logic built up on some stock property like:

const stockColor = (stock) => {
  // example purposes
  if (stock.value < 10) return color.red
  if (stock.value < 30) return color.lightred
  if (stock.value < 50) return color.yellow
  return color.green
}

...
<Avatar style={{ backgroundColor: stockColor(stock)}}>

answered Mar 28, 2021 at 18:15

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alisasani · Accepted Answer · 2021-03-28 18:06:12Z

1

as you are mapping over an object( not an array), you need to implement mapping as sth like this:

Object.keys(color).map(function(key, index) {
////other part of your code
  <Avatar style={{ backgroundColor: color[key]}}>
////other part of your code
});

you need to map over the keys of your object first, and then you would have access to the colors by color[key].

edited Mar 28, 2021 at 18:06

answered Mar 28, 2021 at 18:00

alisasani

3,1311 gold badge10 silver badges19 bronze badges

Collectives™ on Stack Overflow

Using a dictionary of color code values for CSS styles

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related