hi i have a textarea where user write a string and when user type # then i want to show the similar hashtags list and user can choose similar hashtag but now the problem is when user write # for the first time than its is working properly bt when user type #for the second time the code doesn't work. can somebody tell how can i show similar tags whenever user types # or if edit the already choosed hashtag from similar hashtag list
My Code :
code to show similar tags when user type #:
const setMessage = async (evt) => {
setMsg(evt.target.value);
let text = evt.target.value;
if(msg.includes("#") && msg != ""){
var index = msg.indexOf("#");
setUserWrittenTag(msg.substr(index))
await fetch(`/similartags`, {
method:"POST",
headers:{
"Content-Type":"application/json"
},
body: JSON.stringify({
data:msg.substr(index)
})
})
.then(res => res.json())
.then(data => {
setSearchedItemsResult(searchItems => [data])
//this.setState({ searchItems: temp });
});
}
}
code to get selected hashtag:
const getSelectedTag = async(tagname) => {
console.log(tagname)
console.log(userWrittenTag);
setMsg(msg.replace(userWrittenTag,tagname))
setSearchedItemsResult([])
}
code for textarea:
<textarea type = "text" id = "autocomplete" className = "state_block" name = "name" onChange={setMessage} onKeyUp={setMessage} value={msg}> </textarea>
code for tags list:
{
SearchedItemsResult.length > 0 && ( <ul className = "list-group main-screen-filter" > {
SearchedItemsResult[0].data.map((item, idx) => ( <li className = {
"list-group-item"
}
key = { idx }
onClick = {
()=>{getSelectedTag(item.name)}
}
> { item.name } </li>
))
} </ul>
)
}