passing className from the function in React

Question

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}
>

Couple of points worth noting: It's excessive to use a `switch` for a boolean comparison (That could just be an `if(){}else{}` or even `return data.isRead ? className : className + "Unread"`) Also, your `className + "Unread"` will not have a space between, so the result will be a single "ItemsUnread" class (Which may or may not be intentioal) — DBS, Sep 16 '21 at 14:36
Thanks for the comment. I remove the unnecessary parts so this is not the original code. But stuck at the other part! — someone, Sep 16 '21 at 14:42

Akam · Accepted Answer · 2021-09-16T17:35:38.677

2

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}
    >
}

edited Sep 16 '21 at 17:35

answered Sep 16 '21 at 14:43

Akam

131
6

const createClassName = (data) => { return `${classes.NotificationItems} ${data.isRead ? classes.NotificationItemsUnread : ""}`; }; combined both answers and solved with this, thanks! – someone Sep 16 '21 at 14:55
Also not that I mistakenly wrote the condition, when `data.isRead` is `false` you apply _unread_ styles, otherwise it'll be `items` only, so the right condition depending on the code in the question is: ```jsx return `${classes.items} ${!data.isRead ? classes.Unread : ""} ``` Glad you solved the problem. – Akam Sep 16 '21 at 17:34

0stone0 · Answer 2 · 2021-09-16T14:53:35.690

1

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>

edited Sep 16 '21 at 14:53

answered Sep 16 '21 at 14:47

0stone0

34,288
4
39
64

1

const createClassName = (data) => { return `${classes.NotificationItems} ${data.isRead ? classes.NotificationItemsUnread : ""}`; }; combined both answers and solved with this, thanks! – someone Sep 16 '21 at 14:55
1

Glad you've got it sorted out! If somebody [answers your question](https://stackoverflow.com/help/someone-answers), please consider [upvoting](https://meta.stackexchange.com/questions/173399/how-can-i-upvote-answers-and-comments) or [accepting](https://meta.stackexchange.com/q/5234/179419) the answer. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself.| – 0stone0 Sep 16 '21 at 15:10
I always upvoting and giving people credit. I accepted other answer cuz its more useful to my case. Thanks a lot for detailing the question and giving detail answer! – someone Sep 16 '21 at 15:50

passing className from the function in React

2 Answers2

Linked