LevelFilter.js

import React from 'react';

const LevelsFilter = ({ levels, updateQuery, queryParams }) => {

  function colorClassName(level) {
    const levelColor = 'bg-' + level.color + '-500 text-grey-600 flex pointer px-3 py-2 text-sm mr-2 mb-2 text-center justify-center hover:bg-opacity-75 font-bold opacity-50';
    return levelColor;
  }

  return (
    <div className="bg-white shadow-md p-6 mb-4 dark:text-white w-full" id="levels">
      <div className="mb-2">
        <div className="flex">
          <h1 className="flex mb-2 text-gray-600">Difficulty:</h1>
        </div>
        <div className="flex flex-wrap">
          {levels.map(level => (
            <button
              key={level.id}
              onClick={() => { updateQuery('level', level.name) }}
              data-id={level.id}
              className={colorClassName(level)}
            >
              {level.name}
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

export default LevelsFilter;