Как сделать функцию которая будет принимать в себе карточку faq и второй аргумент это строка по которой надо искать через поиск?

Question

[Elena]

Подскажите как через поиск написать функцию которая принимает 2 параметра карточку faq и строку по которой надо искать и потом надо смотреть совпадает ли строка в title либо совпадает с description и если совпадает то надо вернуть true, а если не совпадает вернуть false. Заранее благодарна.
Вот код:

return (
    <div>
      <div className={classes.root}>
        <GridContainer>
          <GridRow>
            <GridColumn>
              <header className={classes.headerSearch}>
                <GridColumn>
                  <div className={classes.mainHeading}>
                    Какую информацию вы хотите найти?
                  </div>
                </GridColumn>
                <GridColumn size={10} offset={1}>
                  <Input
                    type="text"
                    placeholder="Найдите всё, что требуется(онлайн-консультация,
                    добавление записи в медкарту...)"
                    fullWidth
                    classes={{
                      inputWrapper: classes.searchField,
                    }}
                    startAdornment={
                      <InputAdornment
                        position="start"
                        classes={{ root: classes.searchImg }}
                      >
                        <Search></Search>
                      </InputAdornment>
                    }
                  />
                </GridColumn>
              </header>
            </GridColumn>
          </GridRow>
          <GridRow>
            {currentFaqs.map((card) => {
              return (
                <GridColumn size={switchDeviceSize}>
                  <Link to={`/faq/${card.id}`} className={classes.cardLink}>
                    <div className={classes.blockCard} key={card.id}>
                      <div className={classes.boxTitle}>
                        <p className={classes.titleSection}>{card.title}</p>
                        <p className={classes.textSection}>{card.description}</p>
                      </div>
                    </div>
                  </Link>
                </GridColumn>
              );
            })}
          </GridRow>
        </GridContainer>
      </div>
    </div>
  );
};

Comments

[alex4answ]

а теперь нормально опишите задачу, декомпозируйте ее, и сформулируйте без огромной простыни кода

[alex4answ]

Elena, я не вижу "код поиска строки" я вижу только jsx компонент

[alex4answ]

Elena, вам скорее всего не ответят, потому что не понятно что вам нужно, и вы судя по всему тоже не очень понимаете что хотите, скидывайте простые компоненты, где функция поиска?
где частичное решение?
В чем проблема?

Вы просто скопировали где-то этот кусок и не хотите разбираться?

[Elena]

alex4answ, ни где я не копировала это мой кусок кода и что хочу я понимаю
вот это главная страница с карточками:

MockService.onGet("/faq").reply(() => {
  return [200, faqs];
});

export const FAQ = () => {
  const classes = useStyles();
  const [{ device }] = useAppStore();
  const switchDeviceSize = device.isMobile ? 12 : 4;
  const [currentFaqs, setCurrentFaqs] = useState<Faq[]>([]);

  useEffect(() => {
    (async () => {
      try {
        const faqs = await HttpService.get<Faq[]>("/faq");
        setCurrentFaqs(faqs);
        console.log(faqs);
      } catch (error) {}
    })();
  }, []);

  return (
    <div>
      <div className={classes.root}>
        <GridContainer>
          <GridRow>
            <GridColumn>
              <header className={classes.headerSearch}>
                <GridColumn>
                  <div className={classes.mainHeading}>
                    Какую информацию вы хотите найти?
                  </div>
                </GridColumn>
                <GridColumn size={10} offset={1}>
                  <Input
                    type="text"
                    placeholder="Найдите всё, что требуется(онлайн-консультация,
                    добавление записи в медкарту...)"
                    fullWidth
                    classes={{
                      inputWrapper: classes.searchField,
                    }}
                    startAdornment={
                      <InputAdornment
                        position="start"
                        classes={{ root: classes.searchImg }}
                      >
                        <Search></Search>
                      </InputAdornment>
                    }
                  />
                </GridColumn>
              </header>
            </GridColumn>
          </GridRow>
          <GridRow>
            {currentFaqs.map((card) => {
              return (
                <GridColumn size={switchDeviceSize}>
                  <Link to={`/faq/${card.id}`} className={classes.cardLink}>
                    <div className={classes.blockCard} key={card.id}>
                      <div className={classes.boxTitle}>
                        <p className={classes.titleSection}>{card.title}</p>
                        <p className={classes.textSection}>{card.description}</p>
                      </div>
                    </div>
                  </Link>
                </GridColumn>
              );
            })}
          </GridRow>
        </GridContainer>
      </div>
    </div>
  );
};

[Elena]

это моки

export const faqs: Faq[] = [
  {
    id: 1,
    title: "Регистрация в личном кабинете",
    description:
      "Узнайте, как зарегистрироваться в личном кабинете и активировать его",
    content: "<div><p>Cоздайте логин и пароль для дальнейшего входа в ЛК</p><p>Введите имя,фамилию и номер телефона</p><p>И активируйте кнопку</p></div>"
  },
  {
    id: 2,
    title: "Настройки",
    description:
      "Регулируйте настройки личного кабинета под свои потребности.Проверяйте устройства перед консультациями",
    content: "<div><p>Перейдите в раздел 'Настройки' и напротив каждого пункта поставте галочки под свои индивидуальные потребности</p></div>"
  },
  {
    id: 3,
    title: "Здоровье",
    description:
      "Узнайте, как воспользоватся быстрым поиском врача,заказать телемедицинскую консультацию или просмотреть новости вашей клиники",
    content: "<div><p>В разделе 'Здоровье' вы сможете ознакомиться с последними новостями вашей клиники или найти необходимого врача.</p><p>Перейдите в раздел 'Видеочат для общения с врачом' и восползуйтесь услугой телемедицинская консультация </p></div>"
  },
  {

[Elena]

а это тип:

export type Faq = {
  id: number;
  title: string;
  description: string;
  content: string;
};

[WbICHA]

что хочу я понимаю

Зато мы ─ нет.

[Elena]

Когда приходит какая-нибудь строка с поиска надо сравнивать совпадает ли она со строкой title либо совпадает со строкой в description если совпадает то вернуть true иначе false. Это должна быть подстрока и строку сравниваем с подстрокой.

[alex4answ]

Elena,

(YourString) => (YourString === title || YourString === description);

Вот вам функция которая сравнивает строку с title и description и возвращает true или false

[Elena]

alex4answ, очень смешно. спасибо за помощь

[alex4answ]

Elena, что смешного?
Вы скидывайте jsx компоненты, говорите "вот функция поиска", а ее там нет, вы не понимаете о чем пишете и что хотите.

Вы попросили функцию сравнения строки с title и description - вы ее получили, разбираться в портянках и внутренних компонентах (ванговать что там и как работает) никто не собирается, хотите получить реальную помощь и ответ - пишите нормальный вопрос, а не "вот все что у меня есть, я не знаю как это работает, и что конкретно мне нужно, но писала я это сама"

Я сразу сказал что с таким вопросам никто не поможет, потому что попросту ничего не понятно, там нет функций, это простые JSX КОМПОНЕНТЫ.