How can i make div select and unselect like checkbox when adding and removing items from array. My add/remove functionality is working fine but i don't know how to control the view. I make a div that look a like checkbox.

Filter code :-

import React, { useContext, useRef, useState, useEffect } from "react";
import useOnClickOutside from "hooks/outsideClick";
import DataProvider from "context/DataContext";

import filterData from "config/constants";

export default function FilterDropdown() {
  const ref = useRef();
  const {
    filter,
    setFilter,
    dataArray,
    setDataArray,
    checkArray,
    setCheckedArray,   
  } = useContext(DataProvider);
  const showFilter = () => setFilter(!filter);

  const handleFilterValues = (meta_name, meta_value) => {
    const index = dataArray.findIndex(({ value }) => value === meta_value);
    const data = [...dataArray];

    if (index > -1) {
      data.splice(index, 1);
    } else {
      const entry = { name: meta_name, value: meta_value };
      data.push(entry);
    }
    setDataArray(data);
  };

  console.log(dataArray);

  return (
    <div className="hs-unfold ml-3">
      <div
        id="usersFilterDropdown"
        style={{
          minWidth: "20rem",
        }}
        className={`dropdown-unfold dropdown-menu dropdown-menu-sm-right dropdown-card card-dropdown-filter-centered ${
          filter ? "hs-unfold-content-active" : "hs-unfold-content"
        }`}
        ref={ref}
      >
        <div className="card">
          <div className="card-body-filter">           
            <div className="filter-tabs">
              <ul className="screen-options-list">
                {filterData.map((filter, index) => {
                  return (
                    <React.Fragment key={index}>
                      <li className="list-option">
                        <small className="nav-subtitle d-block">
                          {filter.value}
                        </small>
                      </li>
                      {filter.data
                        .filter((val) => {
                          if (search == "") {
                            return val;
                          } else if (
                            val.value
                              .toLowerCase()
                              .includes(search.toLowerCase())
                          ) {
                            return val;
                          }
                        })
                        .map((f, i) => {
                          return (
                            <div
                              className="filter-dropdown-side"
                              key={i}
                              onClick={() =>
                                handleFilterValues(filter.key, f.key)
                              }
                            >
                              <div
                                className="filter-check"
                              ></div>

                              <li className="filter-value">{f.value}</li>
                            </div>
                          );
                        })}
                    </React.Fragment>
                  );
                })}
              </ul>
            </div>            
          </div>
        </div>
      </div>
    </div>
  );
}

I want to trigger/control filter-check class using state variable or that i can use it somewhere else also.

CodePudding user response：

Since you're already storing the selected filter keys in dataArray you can use the below logic to determine whether or not to show or hide the check div.

<div className="filter-check"
     style={{
         display: dataArray.findIndex(({ value }) => value === f.key) > -1 
             ? 'block'
             : 'none'
     }}
></div>

This way you're using something that is already in stored in state (and will update as such) so you don't need to make a new state value to keep track of what filter options have been selected.

CodePudding user response：

Use the tabindex attribute

div {
  border: 1px solid red;
  padding: .25em;
  cursor: pointer;
}

div:focus::after {
  content: ' is selected'
}

<div tabindex="1">first</div>
<div tabindex="2">second</div>
<div tabindex="2">third</div>