Correct way to push an item to array in javascript

Question

I am pushing a new item to the array. when a function call."

const tagItem=[];

function handleSelectOption(title, item) {
  setCompareTagTitle(title);
  tagItem.push(item);
  console.log(tagItem)
  if (title !== compareTagTitle) {
    setCounter(++counter);
  } else if (title === compareTagTitle) {
    setCounter(counter);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

when the function call at first time it pushes an item in the array, but when the function calls the second time it looks like it overwrites the item and pushes the new item correctly after that.

This is the photo:

The expected result is:

['c++','php', 'java', 'JavaScript']

But it gives me:

['php', 'java', 'JavaScript']

is tagItem just a variable declared at the top level of the component? if so it will be redeclared on each render. If you need it to preserve it's value through renders use a ref or a state. (also push appends items to the end of the array, your expected value seems to indicate appending to the start) — pilchard
– pilchard, Commented Apr 3, 2022 at 9:16
Hi! Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. (I doubt Next.js is a factor here.) — T.J. Crowder
– T.J. Crowder, Commented Apr 3, 2022 at 9:16
Thanks for updating the question, but your example still isn't runnable, and still doesn't demonstrate the problem. — T.J. Crowder
– T.J. Crowder, Commented Apr 3, 2022 at 9:30
where was the handleSelectOption called? is it called inside useEffect? — tenshi
– tenshi, Commented Apr 3, 2022 at 9:37

Kim Skovhus Andersen · Accepted Answer · 2022-04-03 09:53:19Z

2

Try adding a local state to your component.

 const [tagItem, setTagItem] = useState([]);

 function handleSelectOption(title, item) {
  setCompareTagTitle(title);
  setTagItem([...tagItem, item]);
  console.log(tagItem)
  if (title !== compareTagTitle) {
    setCounter(++counter);
  } else if (title === compareTagTitle) {
    setCounter(counter);
  }
}

answered Apr 3, 2022 at 9:53

Kim Skovhus Andersen

3963 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zia Yamin Over a year ago

your answer is correct, but I solved it before as @pilchard directed.

Collectives™ on Stack Overflow

Correct way to push an item to array in javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related