I have an array of items and I want to change the background of some of the items.
Checking via the bool you are gonna see that part in switch.
className={classes.Items} this is working but how can I pass className here?
const createClassName = (data) => {
const className = "Items";
switch (data.isRead){
case false:
return className + "Unread";
case true:
return className ;
}
};
{props.data.map((item) => (
<MenuItem
// className={classes.Items}
//className={createClassNameForNotificationNeededRow(item)}
key={item.key}
>
Looks like you use module style files to load classes and then you want to to conditionally apply them, in this case your data is a boolean, either true or false, and remember that classes you read from the imported style modules will be changed by some plugins before they make their way to browser to make it a unique className like items_knc5d5sx so keep in mind to use classes.someClassName instead using a string, anyway, here is a small suggestion for your use case:
const createClassName = (classes, data) => {
return `${classes.items} ${!data.isRead ? classes.Unread : ""}`
};
Then use this function createClassName when you render to create the classes for each item dynamically.
{props.data.map((item) => (
<MenuItem
className={createClassName(classes, item)}
key={item.key}
>
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments