Блог

У меня есть поле ввода, при нажатии на которое отображается список выбранных данных. Теперь мне нужно иметь возможность выполнять поиск по данным на основе любой буквы, которую содержат данные.

Пример: у меня есть список разных цветов — когда я ввожу в поле ввода букву L — все цвета, в которых есть эта буква, фильтруются по -черному, желтому, синему и т.д….

 const colorInformations = "secretURL";

const [colorData, setColorData] = useState([]);
    useEffect(() => {
        getColorInfo();
    }, []);
    const getColorInfo = async () => {
      try {
        const response = await fetch(colorInformations);
        const jsonData = await response.json();
        const { array1, array2 } = jsonData;
        const combinedData = array1.map(({ data1 }, i) => ({
          ...data1,
          ...array2[i].data2
        }));
        setColorData(combinedData); 
      } catch (err) {
        console.log(err)
      }
   };
 

Извлеченные данные:

  { colorData amp;amp; colorData.map(( data1, data2,  index)  =>
        <li key={"index"   index}>
                    <div className="col-6 text ">
                      <h5>{data1.name} </h5>
                      <p>{data2.color} </p>  
        </li>
         )}   
 

Для ввода я пытаюсь сделать это:

 <input type="text" onChange={handleSearchChange} value={search} /> 
 

И функция handleSearchChange:

 const [search, setSearch] = useState("");

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

Здесь я застрял, мне нужно закончить:

1. Фильтруйте данные на основе букв — при вводе L фильтруются все цвета с L в
2. Когда я нажимаю на определенный цвет, он должен отображаться в форме ввода и его нужно запомнить в списке — поэтому, когда список снова открывается, выбранный цвет все еще активен

Я знаю, что должен использовать .функция filter () — я просто не уверен, как и где

1- добавьте новое состояние для filteredData.

 const [filteredColorData, setFilteredColorData] = useState([]);
 

2- onMount установите выбранные данные в отфильтрованные данные вместе с фактическим источником данных.

 const getColorInfo = async () => {
    try {
      const response = await fetch(colorInformations);
      const jsonData = await response.json();
      const { array1, array2 } = jsonData;
      const combinedData = array1.map(({ data1 }, i) => ({
        ...data1,
        ...array2[i].data2
      }));
       setColorData(combinedData);
       setFilteredColorData(combinedData); // set fetched Data.
     } catch (err) {
      console.log(err);
     }
 };
 

3- визуализация отфильтрованных данных, а не фактических данных.

  { 
    filteredColorData amp;amp; filteredColorData.map(( data1, data2,  index)  =>
      <li key={"index"   index}>
        <div className="col-6 text ">
          <h5>{data1.name} </h5>
          <p>{data2.suggestion} </p>  
        </div>
      </li>
    ) 
  }
 

4- реализовать функциональность фильтра, которая фильтрует данные и устанавливает отфильтрованные данные,
а также повторно передает их каждому пользовательскому вводу.

 useEffect(() => {
    filterdata();
  }, [search])

  const filterdata = () => {  
    const filtered = colorData amp;amp; colorData.filter((data1) => {
      return data1.name.toLowerCase().startsWith(search.toLowerCase())
    })

    setFilteredColorData(filtered);
  }
 

также проверьте эту ссылку для вдохновения
в режиме реального времени рабочая демонстрация