Блог

Я пытаюсь отфильтровать массив объектов (показано ниже), который, когда пользователь вводит в поле ввода, возвращает искомое. Я хотел бы выполнить поиск по name ключу и вернуть соответствующее значение.

С тем, что у меня сейчас есть, я продолжаю получать следующую ошибку:

 Objects are not valid as a React child (found: object with keys {type, id, name}). If you meant to render a collection of children, use an array instead.
  

Начальное состояние:

 const [searchTerm, setSearchTerm] = useState('');
const [searchResults, setSearchResults] = useState([]);
  

Массив объектов:

 const people = [
  { name: 'Siri', id: 'siri' },
  { name: 'Alexa', id: 'alexa' },
  { name: 'Google', id: 'google' },
  { name: 'Facebook', id: 'facebook' },
  { name: 'Twitter', id: 'twitter' },
  { name: 'LinkedIn', id: 'linkedin' },
];
  

Эффект использования:

 useEffect(() => {
    const searchResults = processorOptions.filter((o) =>
      Object.keys(o).some((k) => o[k].toString().toLowerCase().includes(searchTerm))
    );

    setSearchResults(searchResults);
}, [searchTerm]);
  

Поле поиска:

 <input
    name='peopleSearch'
    id='peopleSearch'
    className='form-control'
    type='text'
    placeholder='Filter by Name'
/>
  

Отображение результатов поиска:

 {searchResults.map((item) => (
    <li>{item}</li>
))}
  

Вам нужно отобразить название элемента вместо самого элемента:

 {searchResults.map((item) => (
    <li>{item.name}</li>
))}