How to style from an array of objects with using material-ui

Question

I'm use functional component of reactjs. I have an array of objects in which the styles are specified

const data = [
        {
            id: 1,
            color: '#000'
        },
        {
            id: 2,
            color: '#fff'
        }
        // etc
    ]

I need to render as many elements on the page as there are objects in the data array, and each element gets its own unique color (the first element gets color from the first object, the second from the second, etc.).

For this I use the custom hook useStyles from material-ui.

const useStyles = makeStyles((theme) => ({
    divColor: {
        background: data.map((el) => (
            el.color
        )
        )
    }
}));

I expand the HTML part itself like this

{data.map((el, index) => <div key={index} className={classes.divColor} />)}

In this case, I have 2 identical div elements, with the same property

.makeStyles-startAccident-4 {
    background: #000, #fff;
}

CodeSandBox Example

Where did I go wrong?

Chandelier Axel · Accepted Answer · 2020-12-11 22:01:18Z

1

It's because .map always return an array, doing so divColor property is equal to :

['#000', '#fff']

What I would do is this :

{marksId.map((el, index) => <div key={index} style={{ background: data[index].color }}>)}

Doing so, the first mark will get the first color in the array, and so on

edited Dec 11, 2020 at 22:01

answered Dec 11, 2020 at 21:27

Chandelier Axel

2372 silver badges6 bronze badges

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

3 Comments

Miltosh Over a year ago

in this case, into className are written the first letters of the word "makeStyles". first div has className "m" secondt div has "a" etc

Chandelier Axel Over a year ago

Ooooh my bad, I will update my answer. I wouldn't use useStyle for this case and do some inline CSS like this : <div key={index} style={{ background: data[index].color }}>

Miltosh Over a year ago

It looks like it works. Thank you so much!

Collectives™ on Stack Overflow

How to style from an array of objects with using material-ui

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related