JSX: How to create a css-class using 2 string and css modules

Question

I'm using CSS Modules in my React app. There is a need to set a class that will consist of 2 strings and then converted to module.

Example.

import React from 'react';
import css from './ContentMedia.module.css';

const Content = (props) => {
    return (
        <div className={css.container}>
           {props.areas && 
               props.areas.map((area) => {
                   return (
                       <div className={`css.areaGrid${area.grid}`} key={area.id}>
                          ...
                       </div>
                   );
               });
           }
        </div>
    );
};

export default Content;

If I'm setting class as className={css.areaGrid${area.grid}} I receive the wrong result (see the picture below). But I need to receive a predefined css-class .areaGrid12 or .areaGrid6 or .areaGrid4 that should look like i.e. Content_areaGrid12_6yth. How should I fix the JSX to make it work?

norbitrial · Answer 1 · 2020-03-16T16:51:36.090

2

I think what you need is the following:

<div className={`${css.areaGrid}${area.grid}`} key={area.id}>
   {/* your implementation */}
</div>

Think about the following:

const css = { areaGrid: 'area' };
const area = { grid: 'else' };

console.log(`${css.areaGrid}${area.grid}`);

Or if you have a list of properties in css variable - obviously the values in your case are different:

const area = { grid: '12' };
const css = {
  areaGrid12: 'twelve',
  areaGrid6: 'six',
  areaGrid4: 'four'
};

const result = `${css[`areaGrid${area.grid}`]}`;

console.log(result);

I hope this helps!

edited Mar 16 '20 at 16:51

answered Mar 16 '20 at 16:20

norbitrial

14,716
7
32
59

Thx bro, but this is not what I 'm looking for ... – Andriy Slobodyan Mar 16 '20 at 16:42
1

Be careful of the spacing though, depending if you want `areaelse` or `area else`. Though it looks like OP wants ``className={css[`areaGrid${area.grid}`]}`` – Emile Bergeron Mar 16 '20 at 16:43
@EmileBergeron Thanks for pointing that out. Just extended the answer with your suggestion. – norbitrial Mar 16 '20 at 16:52

score 1 · Answer 2 · answered Mar 16 '20 at 17:09

1

This one is what I was looking for .... Thank you Emile Bergeron!!!

className={css[`areaGrid${area.grid}`]}

answered Mar 16 '20 at 17:09

Andriy Slobodyan

21
5

score 0 · Answer 3 · answered Mar 16 '20 at 16:36

0

It works if to do this:

let cssClass = '';

if (area.grid === '12') {
    cssClass = css.areaGrid12;
} else if (area.grid === '6') {
    cssClass = css.areaGrid6;
} else if (area.grid === '4') {
    cssClass = css.areaGrid4;
}

<div className={cssClass}> .....

But this solution IMHO is not very flexible ;)

answered Mar 16 '20 at 16:36

Andriy Slobodyan

21
5

Or just ``className={css[`areaGrid${area.grid}`]}`` – Emile Bergeron Mar 16 '20 at 16:45

JSX: How to create a css-class using 2 string and css modules

3 Answers3