react native expo пытается выполнить поиск добавленных заметок пользователем

#react-native #react-redux #react-router #react-hooks #react-navigation

Вопрос:

Я пытаюсь найти заметки, которые были добавлены пользователем! Я не понимаю логики того, как это сделать .

Вот что я попробовал.

Вот заметки, которые я получил с другой страницы и которые я хочу просмотреть.

   const [Notes, setNotes] = useState([]);
  const [search, setsearch] = useState("");
  // addnotes
  const PassNotes = (note) => {
    // note.id == note.length   1;
    setNotes([...Notes, { key: Math.random().toString(), data: note }]);
  };
 

Вот функция поиска

   const SearchFilter = (text) => {
    if (text) {
      const newData = Notes.filter((item) => {
        const itemdata = item.note ? item.note.toUpperCase() : "".toUpperCase();
        const TextData = text.toUpperCase();
        console.log(itemdata);
        return itemdata.indexOf(TextData) > -1;
      });
      setNotes(newData);
      setsearch(text);
    } else {
      // setNotes(Notes);
      setsearch(text);
    }
  };
 

Вот панель поиска

 <TextInput
          style={styles.inputText}
          placeholder={"I'm looking for..."}
          placeholderTextColor={"#999"}
          underlineColorAndroid={"#fff"}
          autoCorrect={false}
          value={search}
          onChangeText={(text) => SearchFilter(text)}
        />
 

Вот мой плоский список

 <FlatList
          data={Notes}
          renderItem={({ item }) => {
            return (
              <TouchableOpacity
                onPress={() => navigation.navigate("EditeNote", { item })}
              >
                <View style={styles.notesContainer}>
                  <Text style={styles.notes}>{item.data.note.toUpperCase()}</Text>
                  <View style={styles.deleteBtnCon}>
                    <TouchableOpacity onPress={() => removeNote(item.key)}>
                      <Text style={styles.deleteBtn}>X</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </TouchableOpacity>
            );
          }}
        />