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
– DBS, Commented Sep 16, 2021 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! — faux
– faux, Commented Sep 16, 2021 at 14:42

Akam · Accepted Answer · 2021-09-16 17:35:38Z

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, 2021 at 17:35

answered Sep 16, 2021 at 14:43

Akam

1416 bronze badges

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

2 Comments

faux Over a year ago

const createClassName = (data) => { return ${classes.NotificationItems} ${data.isRead ? classes.NotificationItemsUnread : ""}; }; combined both answers and solved with this, thanks!

Akam Over a year ago

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.

0stone0 · Accepted Answer · 2021-09-16 14:53:35Z

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, 2021 at 14:53

answered Sep 16, 2021 at 14:47

0stone0

45.5k6 gold badges53 silver badges82 bronze badges

2 Comments

faux Over a year ago

const createClassName = (data) => { return ${classes.NotificationItems} ${data.isRead ? classes.NotificationItemsUnread : ""}; }; combined both answers and solved with this, thanks!

faux Over a year ago

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!

Collectives™ on Stack Overflow

passing className from the function in React

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related