How to add multiple conditional classes while migrating Vue to React-CodePudding

While migrating vue component to React, i am not able to understand that how can i apply those multiple classes in same div tag.

In Vue,

<ul>
  <li v-for="m in Menus" @click="moveMenu(m)" 
   :> // selectedMenu() is a method
   {{m.name}}
  </li>
</ul>

My query is how can i apply this additional non-prop class attribute adding into the tag in React?

I have tried using template literal to add the classes but not able to do that.

CodePudding user response：

classnames utility serves the same purpose in React and accepts an input that is similar to Vue class bindings and allows for a mix of strings, arrays and objects.

In Vue:

<li :>

In React, an array can be flattened because it's possible to provide multiple arguments to the helper:

<li className={classnames('primaryClass', {'ur-primay__selected': selectedMenu(m)})}>

CodePudding user response：

Using string template with backticks ``:

<div className={`${selectedMenu(m)?'ur-primay__selected':''}`}>