javascript - how to create dynamic css class in react

Question

i want to add following class in class name dynamicaly so i wont have to make diffrent component for all the classes can any one help me solve this problem it would be big help if you can thank you

 <AnnotationLabel
                x={120}
                y={160}
                ny={140}
                nx={20}
                color={"#afb1b3"}
                editMode={false}
                className="country-bg-usa hand-cursor"
                note={{
                    "title": "USA".toUpperCase(),
                    "align": "middle",
                    "orientation": "topBottom",
                    "bgPadding": { left: 7, right: 5 },
                    "padding": 0,
                    "titleColor": "white"
                }}
                events={{
                    onClick: () => gotoCountry("USA")
                }}
            />

here is the css i want to place in className properties

   .country-bg-canada .annotation-note-bg {
    height: 23px;
      fill: #ff0000;
     fill-opacity: 1;
    }
  .country-bg-usa .annotation-note-bg {
    height: 23px;
   fill: #1d1de0;
   fill-opacity: 1;
  }
 .country-bg-suriname  .annotation-note-bg {
  height: 23px;
  width: 56px;
   fill: #f8b13e;
   fill-opacity: 1;
 }

      .country-bg-ireland .annotation-note-bg {
    height: 23px;
     width: 45px;
      fill: #008000;
           fill-opacity: 1;
         }
         .country-bg-unitedKingdom .annotation-note-bg {
      height: 23px;
        width: 88px;
       fill: #0B52F7;
       fill-opacity: 1;
       }
         .country-bg-singapore .annotation-note-bg {
        height: 23px;
          width: 60px;
   fill: #D42441;
      fill-opacity: 1;
         }

question from:https://stackoverflow.com/questions/65641769/how-to-create-dynamic-css-class-in-react

Answer 1

You can do something like this:

 <AnnotationLabel
                x={120}
                y={160}
                ny={140}
                nx={20}
                color={"#afb1b3"}
                editMode={false}
                className={`country-bg-${Your-country} hand-cursor`} // use the template string
                note={{
                    "title": "USA".toUpperCase(),
                    "align": "middle",
                    "orientation": "topBottom",
                    "bgPadding": { left: 7, right: 5 },
                    "padding": 0,
                    "titleColor": "white"
                }}
                events={{
                    onClick: () => gotoCountry("USA")
                }}
            />