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

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.

CodePudding user response：

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]);

CodePudding user response：

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

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

CodePudding user response：

Remove the addedSkills array and update the potentialSkills state directly:

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

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