How to add more than one class on React JSX?

Question

It works with one class only, but it won't compile with 2 or more classes declared.

function Logo() {
    return (
        <div className={logo}>
            <img src={logo} id={logo} className={logo second} alt={"..."}/>
        </div>
    );
}

Error:

  Line 21:55:  Parsing error: Unexpected token, expected "}"

  19 |     return (
  20 |         <div className={logo}>
> 21 |             <img src={logo} id={logo} className={logo second} alt={"..."}/>
     |                                                       ^
  22 |         </div>
  23 |     );
  24 | }

Answer 1

The className prop takes a single string, in the same way that the class attribute would in HTML.

It looks like both of your classes are stored in variables, so you can put them together like so (2 methods):

Template Strings

<img src={logo} id={logo} className={`${logo} ${second}`} alt={"..."}/>

String Concatenation

<img src={logo} id={logo} className={logo + " " + second} alt={"..."}/>