Next.js Discord

Discord Forum

element

Unanswered
Vizsla posted this in #help-forum
Open in Discord
VizslaOP
im not sure what this element is called

37 Replies

VizslaOP
yk those hashtags on tiktok
@Vizsla like those hashtags stuff on tiktok
like an input?
VizslaOP
when you type hashtags
like this
you type smth in the input
and press enter
and it shows the hashtag on the left
@Vizsla and it shows the hashtag on the left
yea, that's a badge. That's data, that is rendered as badge with a cross
I don't want to play guess the word with you. Please clarify your question, so others will be able to help you
VizslaOP
ohh alr
@Vizsla ohh alr
Is your issue already solved like that?
VizslaOP
I mean im tryna find
the thing
called badge
@B33fb0n3 Is your issue already solved like that?
VizslaOP
can you send link to it
i cant really find it
^ its literally just a list being rendered with badges that have a remove action
VizslaOP
yea but thats not what im talking about
VizslaOP
not sure how to explain it in the way im saying
but its fine
@Vizsla not sure how to explain it in the way im saying
You're trying to say how to make it auto create that tag when you press a "," or something?
That can be done by basic JavaScript
If that's what you really searching, that take this function:
    const checkKeywordAndAdd = (e: ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        if (value.includes(",") && value.length > 1) {
            const keywords = value.split(",");
            let oldKeywordsWithNew = seoData?.keywords || [];
            keywords.forEach(keyword => keyword !== "" && oldKeywordsWithNew.push(keyword));
            handleChange("keywords", oldKeywordsWithNew, setSeoData)
            e.target.value = "";
        }
    }
It's really just updating an array of data
Large oak-apple gall
You mean a Tag Input?
VizslaOP
Yes
Thanks