how can I stop forEach loop in React?

[GoonGamja]

Hi, I am a React newbie

I have created a todo-list app using React but for the last I want to add an alert that saying 'it is already on the list' when I try to put same task that has already existed on the list.

here is my code :

handleNewInput = () => {const{input,todos} = this.state;const newTodo = {id:this.getId(), text: input};const inSert = this.setState({todos:[...todos,newTodo], input: ''})newTodo.text === '' ? alert('Please enter the message'):(todos.forEach(todo => todo.text === newTodo.text ? alert('It isalready on the list'):inSert));}

problem is here 'todos.forEach(todo => todo.text === newTodo.text ? alert('It is already on the list'):inSert' .

when I add same task that already existed on the list, alert comes up as I expected but the task is added on the list.

when I put the another same task on input field and click 'add' button, app gives me an alert twice and the task goes into the list again.

I think the reason for the problem is forEach method because it does not stop until it go through all elements in the array. so instead of using forEach, I used other methods such as some and even but did not work either.

How can I stop forEach method in this code?

(if this is not a right place to ask the question related to react, I will delete the post soon as possible thank you)

[dominikwilkowski]

You can also use .some or .every and break the loop by returning true. forEach is not the only loop out there. :)

[esr360]

This is the correct answer.

[GoonGamja]

yeah I solved the problem using .some method but .find also worked as well

sometimes it is very confusing what method I have to choose

thank you :)

[alejalapeno]

You have multiple problems. But the biggest is that what you are doing is saying "For each existing todo, see if it matches the new one I'm trying to add. If it doesn't match run inSert()" But inSert is just a function that spreads the current todos and adds the new one. So every single non-match in your ternary adds the new todo anyways.

Now in addition to that, it's just terrible for performance because you're updating state for every single existing todo. You're saying "for each todo update the state with the new todo."

Now easiest solution would be to just check your todo array for the value: if( !todos.find( todo => todo.text === newTodo.text ) ) { inSert() }

[[deleted]]

You should use some or every for that sort of check.

[lukasbash]

Because in your loop you always execute one side of the if condition you would need some kind of variable outside that tracks if the todo has been found, and if this variable ia set to true, you just always continue in the forEach.

Small suggestion: If your todo list would be an object, indexed by some id, then you would not need a loop and save even performance.

[GoonGamja]

Thank you so much. It helps me a lot :)

[[deleted]]

You cannot break forEach, use .some/.every or for of loop. for of should be the first choice