onChange is appending data multiple times when checking for a string character

Question

I'm trying to append a drop down value to a textarea field, it works as a mention. So if there is an "@" call the dropdown and user will select a user, once selected the dropdown show hide it self, and the user should be able to append their comment data.

the issue im having is that setCommentBody is appending the selectedUser multiple times/ on every comment change in the textarea

My objective is

check for @ symbol (which its already doing)
render drop down once @ symbol is called( which is already doing)
once a value is selected hide drop down and add their comment (dropdown hides only if @ symbol is removed, which it should hide after a value is selected)

The mention should pretty much work exactly how stackoverflow comment section has it.

this is what i have so far

const [comment_body, setCommentBody] = useState(""); const [mentionedUser, setMentionedUser] = useState(false); const commentChange = (comment) => { console.log("this is the selected User", selectedUser); // selected user is a reducer initalState // call this condition if @ is mentioned once if (comment.includes("@")) { setMentionedUser(true); // render dropwdown setCommentBody(comment.concat(selectedUser)); // append the selected user like @barnowl with the respective comment data } else { console.log("can you see me"); setMentionedUser(false); // hide dropdown setCommentBody(comment); } setGifUrl(""); // irrelvant to the problem ignore };

PostItemContainer

<CommentForm commentChange={(e: any) => commentChange(e.target.value)} comment_body={comment_body} onSubmit={(e) => commentSubmit(e, post.id)} gifUrl={selectGif} isGif={gifUrl} mentionedUser={mentionedUser} />;

CommentForm (snippet)

 .... <OurTextField type="gif-commentfield" selectedUser={selectedUser} comment_body={props.comment_body} commentChange={props.commentChange} setGifSelected={() => setGifSelected(true)} />; { props.mentionedUser && ( <select value={selectedUser} onChange={(e) => setSelectedOptionValue(e.target.value)} name="mentionedUsers" > {mentionUsers.map((item, key) => ( <option key={key} value={item.display}> {item.display} </option> ))} </select> ); }

A minimal working example of my issue

https://codesandbox.io/s/practical-ives-lfckq?file=/src/App.js

in your code sandbox, I don't see the username getting appended to the comment — Anthony
– Anthony, Commented Aug 22, 2020 at 21:42
sorry for the delay, you have to press space or another character and the username will populate — BARNOWL
– BARNOWL, Commented Aug 23, 2020 at 0:00

CC. · Accepted Answer · 2020-08-23 15:56:16Z

If I understand the use case correctly, the name insertion logic should be triggered when the selection field is changed:

const commentChange = (comment) => { setCommentBody(comment); if (comment.includes("@")) { showMentionList(true); } }; const selectedUserChange = (user) => { setSelectedUser(user); setCommentBody(commentBody.concat(user).replace("@", "")); showMentionList(false); }; ... <select value={selectedUser} onChange={(e) => selectedUserChange(e.target.value)} name="mentionedUsers" > {users.map((item, key) => ( <option key={key} value={item}> {item} </option> ))} </select>

Does this work for you? See: https://codesandbox.io/s/broken-haze-qwb41?file=/src/App.js

is there anyway we can keep the at symbol before the username while keeping the same logic in tact. Sorta like a discord mention or twitter mention.
You can keep the @ and replace if (comment.includes("@")) with a more elaborated logic. For example, you could track the exact changes to determine at which position the user is writing and if the word the user is currently typing has a @ symbol at the beginning.
yeah i sorta did comment.charAt(0).includes("@") something along those lines, thanks.

Collectives™ on Stack Overflow

onChange is appending data multiple times when checking for a string character

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related