How to pass through class delared in variable into ClassName with react js?

Question

I've got the following variables:

let backgroundColour = 'bg-green-100';
let textColour = 'text-green-700';

And I am trying to pass this class into my ClassName within my render();

  <div className="{backgroundColour} p-5 max-w-md w-full rounded mb-5">
            <div className="flex justify-between">
                <div className="flex space-x-3">
                    <div className="{textColour} flex-1 leading-tight text-sm font-medium">
                        {props.success}
                    </div>
                </div>
            </div>
        </div>

The following is adding {backgroundColour} into the html markup instead of returning the value of the var. Any help on how to get this to correct pull through would be appreciated.

topdev87 · Accepted Answer · 2021-01-18 13:50:41Z

2

Use this:

  <div className={`${backgroundColour} p-5 max-w-md w-full rounded mb-5`}>
      <div className="flex justify-between">
          <div className="flex space-x-3">
              <div className={`${textColour} flex-1 leading-tight text-sm font-medium`}>
                  {props.success}
              </div>
          </div>
      </div>
  </div>

answered Jan 18, 2021 at 13:50

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

2 Comments

flyjip Over a year ago

Thanks, I've just managed to resolve it :)

topdev87 Over a year ago

Great, approve the answer would be helpful for future readers

flyjip · Accepted Answer · 2021-01-18 14:04:29Z

0

I've managed to resolve the error using the following:

<div className={"p-5 max-w-md w-full rounded mb-5 " + backgroundColour}>
</div>

answered Jan 18, 2021 at 14:04

flyjip

32 bronze badges

Collectives™ on Stack Overflow

How to pass through class delared in variable into ClassName with react js?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related