Concatenate className values in React map loop

Question

I'm looping through the days of the week from a database query something like this where 'node.club_night_day' is one day of the week:

{nights.edges.map(({ node }, index) => (
  <div key={index}>
    <div className={clubNightsIcon+node.club_night_day}>
      <div>{node.club_night_name}</div>
    </div>
  </div>
))}

CSS:

.club-nights-icon-wednesday {
  background: linear-gradient(180deg, #DE9FAE 0%, #E70F50 100%);
}

I want the definition for the class to be

clubNightsIconMonday

clubNightsIconTuesday

Is this possible in React? (I'm working with GatsbyJS)

tsflorus · Accepted Answer · 2021-06-10 08:43:08Z

2

I've understand that "clubNightsIcon" isn't a variable but a string you want to pass. If this is the case then you should be able to do this:

<div className={"clubNightsIcon" + (node.club_night_day)}>

Thomas.

answered Jun 10, 2021 at 8:43

tsflorus

312 bronze badges

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

3 Comments

xgarb Over a year ago

This didn't work for me. Possibly because I'm using a global stylesheet and React needs to see the class name defined at the top of the document matched in the className declaration in the return to render it correctly. With your code I got:<div class="clubNightsIconMonday"></div> when it needs to be: <div class="layout-module--club-nights-icon-monday--2uJNR" or similar. Thanks for answer though... pushed me in the right direction.

tsflorus Over a year ago

Well in that case I don't understand what you want to do... I was thinking that you wanted to have a className equal to clubNightsIconMonday. But anyway, the logic stands. If you want to concatenate a string with a variable for a className, you have to make sure that the variable is in parenthesis. Let me know what result you need, I'm a little bit curious. Thomas.

xgarb Over a year ago

I want the className to be clubNightsIconMonday and the code you provided does that but React doesn't render it to --club-nights-icon-monday-- in the final HTML and so it doesn't display with the correct CSS. I'm importing the CSS like this: import { clubNightsIconMonday, } from "../components/layout.module.css"; I think its just the way React (or maybe Gatsby) expects things to be.

xgarb · Accepted Answer · 2021-06-10 13:36:02Z

After trying various ways to concatenate a string with the node value I decided to try a switch and after seeing this post: https://stackoverflow.com/a/51432223/2030399 I have this which works nicely...

              <div
                className={
                  {
                    Monday: clubNightsIconMonday,
                    Tuesday: clubNightsIconTuesday,
                    Wednesday: clubNightsIconWednesday,
                    Thursday: clubNightsIconThursday,
                    Friday: clubNightsIconFriday,
                    Saturday: clubNightsIconSaturday,
                    Sunday: clubNightsIconSunday,
                  }[node.club_night_day]
                }
              ></div>

Collectives™ on Stack Overflow

Concatenate className values in React map loop

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related