Using arr.push() to add an object to an array replacing existing value instead of adding new one

Question

Currently trying to render a list of components that expands/shrinks as values are added/removed from an array of a custom object type. However, whenever I make the called to push a value into a new array and then pass that into a hook, the array simply replaces the previous value rather than making the list of objects longer. Any help appreciated.

// My interface
interface IAddedSkill {
    id: string,
    level: Level,
    name: string,
}

const [potentialSkills, setPotentialSkills] = useState<IAddedSkill[]>([]);
let addedSkills: IAddedSkill[] = [];

function handleAddedSkills(addedSkill: IAddedSkill) {
        addedSkills.push(addedSkill);
        setPotentialSkills(addedSkills);
    }
    ...some code in between
    // Rendering the react component using this hook
    {potentialSkills.map(skill => (
          <Chip label={skill.name} onDelete={() => handleDelete(skill)} />
          ))}

Can anyone see something I'm doing wrong that would cause this behaviour?

Edit: Thanks for all the answers, the implementation I used that resolved the issue was changing the handleAddSkills function to:

function handleAddedSkills(addedSkill: IAddedSkill) {
    setPotentialSkills([...potentialSkills, addedSkill]);
}

I also completely removed any reference to the addedSkills list and removed the declaration.

Variables declared at the top level of a component will be redeclared on every render, if you need to maintain the value through renders use a `ref` or state. But why not just add to the state array? `setPotentialSkills(prev => [...prev, addedSkill]);` — pilchard, Apr 07 '22 at 09:41
Does this answer your question? [Correct way to push an item to array in javascript](https://stackoverflow.com/questions/71724509/correct-way-to-push-an-item-to-array-in-javascript) — pilchard, Apr 07 '22 at 09:46
also [how to set state array using react hooks](https://stackoverflow.com/questions/59100863/how-to-set-state-array-using-react-hooks) — pilchard, Apr 07 '22 at 09:47

javoski · Accepted Answer · 2022-04-07T09:54:30.927

2

Your code is redeclaring the variable addedSkills every render with an empty array， so you are setPotentialSkills with addedSkills which's length always equals 1.

You can just remove addedSkills, and invoke setPotentialSkills like:

setPotentialSkills((previousSkills) => [...previousSkills, addedSkill]);

edited Apr 07 '22 at 09:54

answered Apr 07 '22 at 09:42

javoski

61
4

score 1 · Answer 2 · answered Apr 07 '22 at 09:42

1

You also need to make addedSkills a state variable otherwise it will get overwritten every time your component renders.

let [addedSkills, setAddedSkills] = useState([])

answered Apr 07 '22 at 09:42

Tobias S.

21,159
4
27
45

score 1 · Answer 3 · answered Apr 07 '22 at 09:44

Remove the addedSkills array and update the potentialSkills state directly:

const [potentialSkills, setPotentialSkills] = useState<IAddedSkill[]>([]);

function handleAddedSkills(addedSkill: IAddedSkill) {
    setPotentialSkills((oldSkills) => [...oldSkills, addedSkills]);
}

Using arr.push() to add an object to an array replacing existing value instead of adding new one

3 Answers3