For loop only working on second loop with React hooks

Question

I have a project that I am going to add tags, similar to this site. I want to first check if the tag has already been selected by the user. I have a for loop to see if the tag added equals the tags that are already there.

If I make a tag named Jack, it will work just fine. If I create another tag named Jack, now I have two Jacks(not good). On the third attempt, it doesn't add another Jack (good.)

Here is my relevant code. I have added the console as well. My useState setTagAlreadyThere on is being ignored until the third attempt, when it should go to true on the second attempt. What am I doing wrong here?

const [tagsFound, setTagsFound] = useState([]) const [tagsAdded, setTagsAdded] = useState([]) const [tagAlreadyThere, setTagAlreadyThere] = useState(false) const gatherTags = (tags) => { setTagAlreadyThere(false) console.log(tagAlreadyThere) if (tagsAdded.length === 0) { setTagsAdded([...tagsAdded, tags]); } else { console.log(tagsAdded) for (let i = 0; i < tagsAdded.length; i++) { console.log(tagsAdded[i]) if (tags === tagsAdded[i]) { console.log(tagsAdded[i]) console.log(tags) setTagAlreadyThere(true) console.log(tagAlreadyThere) } } console.log(tagAlreadyThere) if (tagAlreadyThere === false) { setTagsAdded([...tagsAdded, tags]); console.log(tagsAdded) } else { return } } setPostTag('') }

Console.

TagAdder.tsx:9 jack postarticle.tsx:64 false postarticle.tsx:69 ["jack"] postarticle.tsx:72 jack postarticle.tsx:75 jack postarticle.tsx:76 jack postarticle.tsx:78 false postarticle.tsx:81 false postarticle.tsx:84 ["jack"] post.tsx:6 {} postarticle.tsx:92 (2) ["jack", "jack"] post.tsx:6 {} postarticle.tsx:

92

Where is your hooks?

Talgat Saribayev
– Talgat Saribayev

2019-08-31 03:45:01 +00:00
Commented Aug 31, 2019 at 3:45 — Talgat Saribayev
– Talgat Saribayev, Commented Aug 31, 2019 at 3:45
just useState. I'll post

lakerskill
– lakerskill

2019-08-31 03:50:42 +00:00
Commented Aug 31, 2019 at 3:50 — lakerskill
– lakerskill, Commented Aug 31, 2019 at 3:50

Talgat Saribayev · Accepted Answer · 2019-08-31 03:55:45Z

no offense but you code has so many unnecessary stuff.

So why it is happening. Because you tagAlreadyThere is not updated yet. And you are checking it is value.

const gatherTags = (tags) => { if (!tagsAdded.inlcudes(tags)) { setTagsAdded([...tagsAdded, tags]); setPostTag('') } }

No need for const [tagAlreadyThere, setTagAlreadyThere] = useState(false)

Offense? No sir, I totally agree with you. I'm still learning, about a year in, and am trying super hard to get my code tighter. I appreciate your AWESOME answer!

Jojo Tutor · Accepted Answer · 2019-08-31 04:24:48Z

I will give you an idea on why this code causes a lot of issues, no offense.

First is you call a hook inside a loop synchronously, because React.useState hook is asynchronous just like this.setState in class-based and it batches updates to gain performance.

I have an example here on Code Sandbox: Calling Hooks Sync and Async

Second is if your new state is computed from the previous state, use the callback style because you can access the updated previous state, example:

setTagsAdded(prevTagsAdded => [...prevTagsAdded, tags])

You can check the documentation here: Functional Updates

Hope this helps!

Collectives™ on Stack Overflow

For loop only working on second loop with React hooks

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related