I want to make sure that I can't push a duplicated value into an array in a React state. The duplicated value is still going in the array though.
I have tried using .includes
but it is not working.
const categoryCheck = (category) => {
let categories = [...this.state.categories]
if (this.state.categories === undefined) {
return
}
console.log(categories, category)
console.log(!categories.includes(category))
if (!categories.includes(category) === false) {
categories.push(category)
console.log('new category', categories)
}
}
input: 'cat'
Expected result: ['cat']
Actual result: ['cat', 'cat']
UPDATE: This is my function and this is how I call it. Thanks for all the help!
uniqueCategories = category => {
//makes sure that there are no duplicate categories in array
if (category === undefined) {
return;
}
let categories = new Set(category);
categories = Array.from(categories);
console.log(categories);
return categories;
};
I call it in another function like this:
this.setState({
categories: this.uniqueCategories([
...this.state.categories,
categoryInput
])
if (!categories.includes(category) === false) {
is a double negative. Remove the === false
.
Also, consider using a Set
for uniqueness. Typically, sets offer fast lookup time and automatically reject duplicates, but for small amounts of data the performance is probably no better than array with includes
.
Here's a toy example of using Set
:
const {useState} = React;
const Example = () => {
const [categories, setCategories] = useState(new Set());
const [item, setItem] = useState("");
const addCategory = e => {
if (e.key === "Enter" && item.trim()) {
setCategories(new Set(categories).add(item.trim()));
}
};
return (
<div>
<input
onKeyPress={addCategory}
onChange={e => setItem(e.target.value)}
value={item}
/>
<button onClick={addCategory}>Add Item</button>
<ul>{[...categories].map(e => <li key={e}>{e}</li>)}</ul>
</div>
);
};
ReactDOM.render(<Example />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.development.js"></script>
You can use Set
in ES6
const categoryCheck = (category) => {
if (this.state.categories === undefined) {
return
}
let categories = new Set(this.state.categories)
categories.add(category)
this.setState({ categories: Array.from(categories) })
}
Problem Let's make a basic list and sort it to make sure that 2 is ALWAYS first in the list. Simple enough, right? [1, 2, 3].sort((a, b) => { if (a === 2) return -1; return 0; }); Chrome ...
Problem Let's make a basic list and sort it to make sure that 2 is ALWAYS first in the list. Simple enough, right? [1, 2, 3].sort((a, b) => { if (a === 2) return -1; return 0; }); Chrome ...
I need to handle multiple event which will generate same HTML dynamically. I have added addEventListener for all elements. Also getting different event value. Now i just need to set this result to ...
I need to handle multiple event which will generate same HTML dynamically. I have added addEventListener for all elements. Also getting different event value. Now i just need to set this result to ...
Following scenario/my solution consists of the following: Project one: (SELF HOST) I have a SignalR console application which handles the logic including the authentication process ( queries ...
Following scenario/my solution consists of the following: Project one: (SELF HOST) I have a SignalR console application which handles the logic including the authentication process ( queries ...
I'm trying to solve the task, get quantity of missed elements from an array. For example, if given an array [1,3,6], the quantity of missed elements is 3 (2,4,5). But somewhere code goes wrong and ...
I'm trying to solve the task, get quantity of missed elements from an array. For example, if given an array [1,3,6], the quantity of missed elements is 3 (2,4,5). But somewhere code goes wrong and ...