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}
>
}
As stated in the comments, no need for that switch, I've changed it to an inline if-statement.
To get the desired behaviour, call the createClassName function on each map() iteration.
Example snippet:
class Example extends React.Component {
// Function to create item className
createClassName = (data) => {
return (data.isRead) ? 'ItemsUnread' : 'Items';
};
// Debug test data
testData = [ { id: 1 }, { id: 2 }, { id: 3, isRead: true } ];
// Render
render() {
return (
<div>
{this.testData.map((data) => {
const className = this.createClassName(data);
const content = `${data.id}: ${className}`;
return <div className={className}>{content}</div>
})}
</div>
);
}
}
ReactDOM.render(<Example />, document.body);.Items { color: green; }
.ItemsUnread { color: red; }<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>