Как переписать функцию поиска React?

Да, один input, этот компонент по типа select с поиском.....

Подскажи в какую сторону "копать", что бы сделать этот поиск, потому что как делать поиск только по заголовкам я понял быстро, это просто)
А как ещё и с вложенными элементами поиск делать не понятно

Как переписать функцию поиска React?

WbICHA, Пока что не пойму как сделать возможность поиска по заголовкам и по категориям)))

Как переписать функцию поиска React?

Natebash, Ставлю any что бы он не раздражал пока пишу код, потом всё это исправляю)

Как переписать функцию поиска React?

WbICHA, Сам писал, так как сделать поиск только для заголовков я понимаю, а как сделать его что бы и вложенные элементы включались в поиск нет

Как сделать такое выпадающее меню на React?

MrYogurt, Кстати забыл показать в каком видео данные приходят в мой (select\dropdown)

Вот такой объект, где сначала общее имя списка, а потом массив объектов где по одной категории, то есть в поиск должны включатся и общее название и название каждой категории....

Как сделать такое выпадающее меню на React?

MrYogurt, Тут задача в основном состоит что бы в поиске были и заголовки и вложенные элементы

Как сделать такое выпадающее меню на React?

Вадим,

Как сделать такое выпадающее меню на React?

Я вот что-то такое написал, но не поучается сделать поиск по вложенным элементам, поиск сейчас работает только по заголовкам, нужно как-то по всему тексту делать поиск

Потом думаю просто из SelectItem сделать аккордеон и должно быть норм)

import React, { FC, useEffect, useState } from 'react';
import Style from './Select.module.scss';

interface ISelectItem {
  name: string;
  categories: [];
}

interface ISelect {
  placeholder?: string;
  lists: any;
}

const SelectItem: FC<ISelectItem> = ({ name, categories }) => {
  return (
    <li className={Style.Item}>
      <p className={Style.ItemName}>{name}</p>
      <ul>
        {categories.map((category: any) => (
          <li key={category.id}>{category.name}</li>
        ))}
      </ul>
    </li>
  );
};

const filterList = (searchText: string, list: any[]) => {
  if (!searchText) return list;
  return list.filter(({ name }) =>
    name.toLowerCase().includes(searchText.toLowerCase())
  );
};

const Select: FC<ISelect> = ({ placeholder, lists }) => {
  const [searchInput, setSearchInput] = useState('');
  const [filteredList, setFilteredList] = useState<any>();

  useEffect(() => {
    const Debounce = setTimeout(() => {
      const sortedList = filterList(searchInput, lists);
      setFilteredList(sortedList);
    }, 300);
    return () => clearTimeout(Debounce);
  }, [searchInput]);

  console.log(lists.map((list: any) => list.categories));
  return (
    <div className={Style.wrapper}>
      <input
        type="text"
        placeholder={placeholder}
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
      />
      <ul>
        {filteredList &&
          filteredList.map((item: any) => (
            <SelectItem
              key={item.id}
              name={item.name}
              categories={item.categories}
            />
          ))}
      </ul>
    </div>
  );
};

export default Select;

Как сделать такое выпадающее меню на React?

Вадим, Потом на каждый элемент где есть вложенные элементы сделаю наверное "аккордеон" и должно наверное получится то что нужно)

Как сделать такое выпадающее меню на React?

Вадим,
Я вот что-то такое написал, но не поучается сделать поиск по вложенным элементам, поиск сейчас работает только по заголовкам, нужно как-то по всему тексту делать поиск

Сейчас у меня работает поиск по заголовкам

import React, { FC, useEffect, useState } from 'react';
import Style from './Select.module.scss';

interface ISelectItem {
  name: string;
  categories: [];
}

interface ISelect {
  placeholder?: string;
  lists: any;
}

const SelectItem: FC<ISelectItem> = ({ name, categories }) => {
  return (
    <li className={Style.Item}>
      <p className={Style.ItemName}>{name}</p>
      <ul>
        {categories.map((category: any) => (
          <li key={category.id}>{category.name}</li>
        ))}
      </ul>
    </li>
  );
};

const filterList = (searchText: string, list: any[]) => {
  if (!searchText) return list;
  return list.filter(({ name }) =>
    name.toLowerCase().includes(searchText.toLowerCase())
  );
};

const Select: FC<ISelect> = ({ placeholder, lists }) => {
  const [searchInput, setSearchInput] = useState('');
  const [filteredList, setFilteredList] = useState<any>();

  useEffect(() => {
    const Debounce = setTimeout(() => {
      const sortedList = filterList(searchInput, lists);
      setFilteredList(sortedList);
    }, 300);
    return () => clearTimeout(Debounce);
  }, [searchInput]);

  console.log(lists.map((list: any) => list.categories));
  return (
    <div className={Style.wrapper}>
      <input
        type="text"
        placeholder={placeholder}
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
      />
      <ul>
        {filteredList &&
          filteredList.map((item: any) => (
            <SelectItem
              key={item.id}
              name={item.name}
              categories={item.categories}
            />
          ))}
      </ul>
    </div>
  );
};

export default Select;