Блог

Я пытаюсь отфильтровать данные строки, которые отображаются в пользовательском интерфейсе, но не могу отфильтровать данные строки, когда имя или lname соответствуют критериям поиска, т.Е. поиск

Я просто реорганизовал пару вещей, которые я удалил:

 const filterData = () => {
    if (search === "") {
      return items;
    }
  };
  

затем я обновляю элементы как функцию, где, если поиск определен как реквизит, вы фильтруете

 import React from "react";
export const CustTable = ({ columns, data, setData, search, setSearch }) => {
  const [editable, setEditable] = React.useState("");
  const cellEditable = (label) => {
    data.map((l) => {
      if (l.name === label.name) {
        setEditable(label.name);
      }
    });
  };
  const changeLastName = (name, e, index) => {
    e.persist();
    setData((prevData) => {
      return [
        ...prevData.slice(0, index),
        { name, lname: e.target.value },
        ...prevData.slice(index   1)
      ];
    });
  };
  const items = () => {
    let resultItems = data;
    if (search) {
      resultItems = data.filter((item) =>
        item.name.toLowerCase().includes(search.toLowerCase())
      );
    }

    return resultItems.map((label, index) => {
      return (
        <tr style={{ display: "flex" }} key={index}>
          <span style={{ width: "35%" }}>{label.name} </span>
          {editable === label.name ? (
            <input
              type="text"
              value={label.lname}
              onChange={(e) => changeLastName(label.name, e, index)}
            />
          ) : (
            <span onClick={() => cellEditable(label)}>{label.lname} </span>
          )}
        </tr>
      );
    });
  };

  const searchData = (e) => {
    setSearch(e.target.value);
  };

  return (
    <>
      <div>
        <input
          type="search"
          placeholder="search"
          onChange={(e) => searchData(e)}
        />
      </div>
      {items()}
    </>
  );
};
  

https://codesandbox.io/s/customtablereact-forked-f01c6