React Native TextInput hashtaag parsing

Question

I'm trying to make a TextInput that parses hashtags and make request while typing them.

Just like here below Tags section while creating a new post where we are adding tags to the post.

With the code below what I achieve atm is:

1.When i type something it detects the last matched hashtag via regex and makes a request for the data.

2.When I move the cursor it also detects the if the word where the cursor pointed, is a hashtag and if so makes a request for the data.

These functions works but not fully as I expected. first of all I need to clear hashTags data which renders <HashTags /> component if I hit Space from the keyboard. (Maybe I need to change my hashTagRegex for that.

I need to able to edit these hashtags and re-make the request by selected hashtag..

Thats all!

Maybe I have some logic error here, maybe something different.

Any suggestions for achieving that?

const [hashTags, setHashTags] = useState([]);

const onChangeText = text => {
  // set input to global state
  comments.text = text;
};

const onSelectionChange = event => {
  //get cursor's current location in the textinput
  const cursorPosition = event.nativeEvent.selection.end;
  const hashTagRegex = /(^|\s)#(\w*[a-zA-Z0-9_]+\w*)/g;

  //get the text from start to the cursor and parse the last keyword by splitting from spaces
  const textBeforeCursor = comments.text.slice(0, cursorPosition).split(" ")[
    comments.text.slice(0, cursorPosition).split(" ").length - 1
  ];

  if (textBeforeCursor) {
    // look for matching hashtag in the local state that we setting below if there is a matched hashtag by Regex
    const findIndex = hashTags.find(e => e.includes(textBeforeCursor));
    if (findIndex) {
      // send request with the found keyword befor cursor
      post.searchTagsCall
        .execute(findIndex.split("#")[1])
        .then(resp => console.log("resp", resp))
        .catch(e => console.warn("e", e));
    }
  }

  // if there is a hashtag that matches to the regex
  if (comments.text.match(hashTagRegex)) {
    //add it to the local state
    setHashTags(comments.text.match(hashTagRegex));

    //and make a request with it
    post.searchTagsCall
      .execute(comments.text.match(hashTagRegex)[comments.text.match(hashTagRegex).length - 1].split("#")[1])
      .then(resp => console.log("resp", resp))
      .catch(e => console.warn("e", e));
  }
};

const onKeyPress = event => {
  const {key} = event.nativeEvent;
  if (key === " ") post.searchTagsCall.result = [];
};

return (
  <View style={styles().container}>
    {hashTags.length > 0 ? <HasTags hashtags={post.searchTagsCall.getResultOrDefault(x => x.data, [])} /> : null}
    <TextInput
      placeholder="Yorumunu yaz..."
      placeholderTextColor={colorsText.second}
      multiline={true}
      textAlignVertical="top"
      underlineColorAndroid="transparent"
      value={comments.text}
      onKeyPress={onKeyPress}
      isFocused
      style={[
        textStyles().boldSemi,
        textStyles().fontSize16,
        {
          // height: this.state.inputHeight,
          paddingLeft: 20,
          marginBottom: 10,
          width: "100%",
          textAlignVertical: "center",
          color: colorsText.main,
        },
      ]}
      onChangeText={onChangeText}
      onSelectionChange={onSelectionChange}
    />
  </View>
);