Currently, I'm utilizing the functional component of React.js. Within this component, I have an array of objects that contain specific styles.
const data = [
{
id: 1,
color: '#000'
},
{
id: 2,
color: '#fff'
}
// and so on
]
The objective is to display a number of elements on the page equal to the number of objects in the data array, where each element has a unique color assigned (e.g., first element gets color from first object, second from second, etc.).
To achieve this, I am using the custom hook useStyles from Material-UI.
const useStyles = makeStyles((theme) => ({
divColor: {
background: data.map((el) => (
el.color
)
)
}
}));
This setup translates into the HTML structure as follows:
{data.map((el, index) => <div key={index} className={classes.divColor} />)}
However, the issue arises where I end up with two identical div elements, both having the same property applied:
.makeStyles-startAccident-4 {
background: #000, #fff;
}
Trying to troubleshoot this problem? Check out the CodeSandBox Example for more insights.
What could be causing this error?