Как в реакте при поиске выводить надпись нет результатов?

В React, чтобы выводить надпись "нет результатов" при поиске, вам потребуется использовать состояние компонента, условную отрисовку и обработчики событий. Вот пример, который показывает, как это можно сделать.

Сначала определяем компонент поиска и его состояние:

import React, { useState } from 'react';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  // Обработчик изменения значения поля поиска
  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  // Обработчик нажатия клавиши "Enter" при поиске
  const handleKeyPress = (event) => {
    if (event.key === 'Enter') {
      // Имитируем поиск и устанавливаем результаты
      const searchResults = performSearch(searchTerm);
      setResults(searchResults);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={handleChange}
        onKeyPress={handleKeyPress}
      />
      {results.length === 0 && <p>Нет результатов</p>}
      {results.length > 0 && (
        <ul>
          {results.map((result) => (
            <li key={result.id}>{result.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default Search;

В этом примере мы используем два состояния: "searchTerm" (изначально пустая строка) для хранения введенного значения поиска, и "results" (изначально пустой массив) для хранения результатов поиска.

У нас есть два обработчика событий: "handleChange" для обновления значения "searchTerm" при изменении поля ввода, и "handleKeyPress" для запуска поиска при нажатии клавиши "Enter".

Компонент выводит ввод поиска и проверяет, есть ли результаты или нет. Если результатов нет, выводится надпись "Нет результатов" (условная отрисовка с использованием оператора &&). Если есть результаты, они отображаются списком.

Вот пример функции "performSearch", которую мы используем в обработчике "handleKeyPress", чтобы имитировать поиск:

function performSearch(searchTerm) {
  // Вместо этого можно выполнять реальный поиск (например, отправлять запрос на сервер)
  const data = [
    { id: 1, title: 'Результат 1' },
    { id: 2, title: 'Результат 2' },
    { id: 3, title: 'Результат 3' },
  ];

  return data.filter((item) => item.title.includes(searchTerm));
}

Эта функция принимает значение поиска и возвращает массив результатов, фильтруя данные на основе введенного значения поиска.

Конечно, этот пример демонстрирует только один из множества вариантов реализации поиска и вывода надписи "нет результатов" в React. Вы можете адаптировать его в соответствии с вашими потребностями, добавить стилизацию и настройки поиска по вашему усмотрению.