How to conditionally set a class in react?

Question

React

There are buttons for filtering, and the active button needs to add an active class.

Interface

I saw that the buttons are taken out to an array of objects and displayed, inside they already throw a class according to the condition, I did the same:

import { useDispatch, useSelector } from 'react-redux'
import { filter } from '../store/todoSlice'

const TodoFilter = () => {
  const dispatch = useDispatch()
  const activeBtn = useSelector(state => state.todos.keyFilter)
  
  const handleFilter = (key) => {
    dispatch(filter({ key }))
  }
  
  const listBtns = [
    {
      name: 'Все',
      key: 'all'
    },
    {
      name: 'Выполненные',
      key: 'completed'
    },
    {
      name: 'Не выполненные',
      key: 'uncompleted'
    }
  ]
  
  return (
    <div className='btn-group d-flex mb-3'>
      {
        listBtns.map(btn => {
          let clazz = ''
          
          if (activeBtn === btn.key) clazz = 'active'
          
          return (
            <button
              onClick={() => handleFilter(btn.key)}
              className={`shadow-none btn btn-outline-primary ${clazz}`}
            >
              {btn.name}
            </button>
          )
        })
      }
    </div>
  )
}

export default TodoFilter

Is it right to do so?

Answer 1

You can use a very simple but handy library called classnames .

<button
    onClick={() => handleFilter(btn.key)}
    className={ classnames('shadow-none', 'btn', 'btn-outline-primary', { active: activeBtn === btn.key }) }
>
    {btn.name}
</button>

Answer 2

onClick={() => handleFilter(btn.key)}
className={`shadow-none btn btn-outline-primary ${clazz}`}
activeClassName={'active'}
>