Untitled

I have created different components using React. How do I write the files  ClearButton.jsx and Clearbutton.css in the map ClearButton in src/components if I want to clear all the checked boxes in the src/components/Filter, i.e. return them to false. I also have the src/components/Searchbar where the Clearbutton is placed. 

CheckboxSelector.jsx
import { useState } from "react";
import "./CheckboxSelector.css";

export function CheckboxSelector({ paramList, parentCallback }) {
  
  function handleCheckboxChange(key, value) {
    const updatedParamList = {
      ...paramList,
      [key]: !value,
    };
    parentCallback(updatedParamList);
  }

  return (
    <div className="typeFilters">
      {Object.entries(paramList).map(([key, value]) => (
        <div className="checkboxItem" key={key}>
          <input
            className="typeCheckbox"
            type="checkbox"
            id={key}
            checked={value}
            onChange={() => handleCheckboxChange(key, value)}
          />
          <label className="checkboxLabel" htmlFor={key}>
            {key.replace(/_/g, " ")}
          </label>
        </div>
      ))}
    </div>
  );
}

filterParams.jsx
export function extractSelectedParameters(
  selectedTypeFilters,
  selectedCuisineFilters,
  selectedAllergyFilters,
  selectedDietFilters
) {
  const type = createUrlString(getParameterNames(selectedTypeFilters));
  const cuisine = createUrlString(getParameterNames(selectedCuisineFilters));
  const intolerances = createUrlString(
    getParameterNames(selectedAllergyFilters)
  );
  const diet = createUrlString(getParameterNames(selectedDietFilters));
  return {
    ...(type !== null && type !== undefined && type !== '' && { type }),
    ...(cuisine !== null && cuisine !== undefined && cuisine !== '' && { cuisine }),
    ...(intolerances !== null && intolerances !== undefined && intolerances !== '' && { intolerances }),
    ...(diet !== null && diet !== undefined && diet !== '' && { diet })
  };
}

function getParameterNames(params) {
  const names = Object.entries(params)
    .filter(([key, value]) => value === true)
    .map(([key, value]) => key);
  return names;
}

function createUrlString(params) {
  const urlString = params.join(",").replace(/_/g, " ");
  return urlString;
}

export function getTypeFilters() {
  return typeFilters;
}
const typeFilters = {
  breakfast: false,
  lunch: false,
  main_course: false,
  side_dish: false,
  dessert: false,
  appetizer: false,
  salad: false,
  bread: false,
  soup: false,
  beverage: false,
  sauce: false,
  marinade: false,
  fingerfood: false,
  snack: false,
  drink: false,
};

export function getCuisineFilters() {
  return cuisineFilters;
}
const cuisineFilters = {
  african: false,
  american: false,
  british: false,
  cajun: false,
  caribbean: false,
  chinese: false,
  eastern_european: false,
  european: false,
  french: false,
  german: false,
  greek: false,
  indian: false,
  irish: false,
  italian: false,
  japanese: false,
  jewish: false,
  korean: false,
  latin_american: false,
  mediterranean: false,
  mexican: false,
  middle_eastern: false,
  nordic: false,
  southern: false,
  spanish: false,
  thai: false,
  vietnamese: false,
};

export function getAllergyFilters() {
  return allergyFilters;
}
const allergyFilters = {
  dairy: false,
  egg: false,
  gluten: false,
  grain: false,
  peanut: false,
  seafood: false,
  sesame: false,
  shellfish: false,
  soy: false,
  sulfite: false,
  tree_nut: false,
  wheat: false,
};

export function getDietFilters() {
  return dietFilters;
}
const dietFilters = {
  gluten_free: false,
  ketogenic: false,
  vegetarian: false,
  lacto_vegetarian: false,
  ovo_vegetarian: false,
  vegan: false,
  pescetarian: false,
  paleo: false,
  primal: false,
};

Searchbar.css

.searchbar-container {
  display: flex;
  
}

.search-container {
  display: flex;
  margin-top: 32px;
  height: auto;
  border: 2px solid black;
  background-color: #ffffff80;
  border-radius: 20px;
  align-items: center;
  width: 100%;

}

.inputbar {
  display: flex;
  font-size: 20px;
  color: #000;
  font-weight: 500;
  background-color: transparent;
  border: 0px;
  margin-left: 5px;
  margin-right: -20px;
  width: 100%;
}

input.inputbar:focus {
  outline-width: 0px;
}

.searchbutton {
  color: #000;
  border: 2px solid black;
  border-radius: 20px;
  background-color: whitesmoke;
  padding: 9px;
  margin: 2px;
  width: 30%;
}

.clearbutton {
  margin-left: 5px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  border: 2px solid black;;
  cursor: pointer;
  margin-top: 30px;
  border-radius: 20px;
  background-color: whitesmoke;
}

.clear-img {
  width: 30px;
  height: 30px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  transition: background-color 9999s ease-in-out 0s;
}

@media screen and (max-width: 480px) {
  .searchbutton {
    padding: 4px;
  }
}

Searchbar.jsx
import "./Searchbar.css";
import clear from "../../images/clear.png";

export function Searchbar(props) {
  const handleChange = (e) => {
    props.setQuery(e.target.value.toLowerCase());
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    props.fetchRecipes();
  };

  return (
    <div className="searchbar-container">
      <form onSubmit={handleSubmit} className="search-container">
        <input
          onChange={handleChange}
          className="inputbar"
          type="text"
          name="inputSearchBar"
          placeholder="Search for a recipe"
        />
        <button className="searchbutton" type="submit">
          <p className="text-search">SEARCH</p>
        </button>
      </form>
      <button className="clearbutton">
        <img className="clear-img" src={clear} alt="Clear Button" />
      </button>
    </div>
  );
}