Поиск по массиву объектов

Question

Представьте, если у меня есть массив объектов - идентификатор и значение. Прямо сейчас массив пустой Array []. Но отправляется каждый раз, когда пользователь вводит и добавляет имя. Если пользователь вводит Анну, Педро и Джоану, массив обновляется до

    Array [
  Object {
    "id": "0.265247357395923",
    "value": "Anna",
  },
  Object {
    "id": "0.07416445026556007",
    "value": "Pedro",
  },
  Object {
    "id": "0.9097178194832282",
    "value": "Joana",
  },
]

Моя задача - добавить панель поиска, где я могу искать значение объекта внутри массива. Вот мой код до сих пор.

My useState

const [folder, emptyFolder] = useState([]);
const [searchTerm, setSearchTerm] = useState("");

Мое имя

const addFolder = (folderName) => {
    emptyFolder((currentFolder) => [
      ...currentFolder,
      { id: Math.random().toString(), value: folderName },
    ]);
  };

Мой поиск. Вот где я хочу реализовать свой код, пока это то, что я могу сделать:

const filteredData = folder.filter((item) => {
    const textData = searchTerm.toUpperCase();
    const nameFolder = item.value.toUpperCase();
    return nameFolder.includes(textData);
  });

  const _searchFilterFunction = (value) => {
    //???
  };

Вот мой Return, где у меня есть TextInput в качестве панели поиска и {FilterData.map ((item, index) => {return {item.value};})} отображение моего списка имен каждый раз, когда пользователь создает.

return (
    <View style={styles.HomeContainer}>
      <TextInput
        underlineColorAndroid="transparent"
        autoCapitalize="none"
        placeholderTextColor="#9a73ef"
        style={styles.search}
        placeholder="Search"
        onChangeText={(value) => {
          _searchFilterFunction(value, folder);
        }}
      />
      <FolderInput myFolder={addFolder} />

      {filteredData.map((item, index) => {
        return <Text key={item.id}>{item.value}</Text>;
      })}
    </View>
  );
};

ПОЖАЛУЙСТА, ПОМОГИТЕ СПАСИБО ОГРОМНОЕ.

Answer 1

Вы можете просто отфильтровать массив объектов (папок) следующим образом:

const filteredFolders = () => {
  return state.folders.filter(({ name }) =>
    name.toLowerCase().includes(state.search.toLowerCase())
  );
}

Где state.search поступает из входа. Я создал песочницу с рабочей демоверсией

Answer 2

То, что вы пытаетесь, правильно.

const filteredData = folder.filter((item) => {
    const textData = searchTerm.toUpperCase();
    const nameFolder = item.value.toUpperCase();
    return (nameFolder.indexOf(textData) >= 0)
});

includes используется для массива со строкой, но здесь на самом деле вы сравниваете строки, верно? так что вы можете go с помощью indexOf, он вернет true, если ваша строка поиска является подстрокой элемента объекта.