Check duplicates from a state hook in React - reactjs

Question

I'm trying to figure out on how to remove duplicates from an array of objects when entering multiple input skill tags. Maybe I am missing some key points here
const SkillsTags = ({ skillTags, setSkillTags, skill }) => {
const removeSkillTag = (i) => {
setSkillTags([...skillTags.filter((_, index) => index !== i)]);
};
const addSkillTag = (e) => {
e.preventDefault();
var updatedSkills = [...skillTags];
if (skill.current.value.trim().length !== 0) {
updatedSkills = [...skillTags, { SKILL_NAME: skill.current.value }];
}
setSkillTags(updatedSkills);
skill.current.value = "";
};
return (
<>
<label htmlFor="Skills">Skills:</label>
<div className="input-group">
<input
type="text"
placeholder="Enter Skills (Press Enter to add)"
onKeyPress={(e) => (e.key === "Enter" ? addSkillTag(e) : null)}
ref={skill}
/>
<button className="btn btn-outline-primary" onClick={addSkillTag}>
Add
</button>
</div>
<ul style={{ height: "12.5rem" }}>
{skillTags.map((val, index) => {
return (
<li key={index}>
{val.SKILL_NAME}
<button type="button" onClick={() => removeSkillTag(index)}>
Remove
</button>
</li>
);
})}
</ul>
</>
);
};
Demo here: https://codesandbox.io/s/add-skill-tags-nitthd?file=/src/SkillsTags.js

Answer 1

I think you are trying to filter duplicates, You can achieve this with simple Javascript.
const addSkillTag = (e) => {
e.preventDefault();
const isDuplicate = skillTags.some(function (item, idx) {
return item.SKILL_NAME === skill.current.value;
});
if (skill.current.value.trim().length !== 0) {
if (!isDuplicate) {
skillTags = [...skillTags, { SKILL_NAME: skill.current.value }];
}
}
setSkillTags(skillTags);
skill.current.value = "";
};