CODEWITHSUNDEEP
reactjs
fransua
fransua

Reputation: 533

React / How to assign a variable to a classname property

Hello

In the following code I have tried to assign the variable classNameDiv to a classname, but it doesn't work. Strangely double curly brackets works for the style property just below

return (
  <div className="item" key={i}>
    <img src={`./images/${myjson.images[index].name}`} alt="" />
    <div className="allBoxes">
      {myjson.images[index].palette.map((index2, j) => {
        const b = myjson.images[index].palette[j]
        const classNameDiv = "colorBox";
        if (RefArrayPalette[index][j] === 1) {
          classNameDiv = "colorBox2";//_________________first here___________
        }
        return (
          <div
            key={j}
            //className="colorBox"
            className={{classNameDiv}}  //____________________then here_____________
            style={{ backgroundColor: index2 }}
            onClick={calculateNewList}
          />
        )
      }, (i, index))}

Upvotes: 0

Views: 720

Answers (2)

shantr
shantr

Reputation: 804

In your example className is a const so it not reassignable, you should use let

div className props is expected to be a string

className={{classNameDiv}} actually mean you are passing the object { classNameDiv: classNameDiv } as className prop

What you should do is className={classNameDiv}

Upvotes: 1

David
David

Reputation: 218808

The className property expects a string, but you're passing it an object:

className={{classNameDiv}}

Just pass it the string value:

className={classNameDiv}

Strangely double curly brackets works for the style property just below

Because the style property expects an object. It's not really "double curly braces", it's an object literal (which uses curly braces) inside of a JSX property (which uses curly braces).

Upvotes: 0

Related Questions