Reputation: 11
I'am rendering cards and i have two array, i would like to disable the buttons that have an equal id between the two array.
for expemple:
idOne = [9,5,1,4];
idTwo = [6,1,3,4];
In this case i would like to disable the button for 4 and 1 since both have the same value.
here is the render method where i pass the button
render(){
this.button()
}
Here is my try
button = () {
idOne = [9,5,1,4];
idTwo = [6,1,3,4];
const checkId = idOne.some(n => idTwo.includes(n))
if(checkedId){
return <Button disable />
}
return <Button />
}
}
But this will disable all the buttons and not the ones that have equal id's.
thanks for the help
Upvotes: 0
Views: 264
Reputation: 2175
I broke it down into two seperate steps. First I would use filter to return an array of all the ids that match between the two ids.
const arr1 = [9, 5, 1, 4]
const arr2 = [6, 1, 3, 4]
const matches = arr1.filter(el => arr2.includes(el)
Then once I have an array of all the matches you can map
over all the ids in arr1 and then do the check if any ids sync up. This will return a bool value that will allow you to render conditional components
return arr1.map(el => {
if (matches.includes(el)) {
return <Button disable />
}
return <Button />
})
You could refactor it down even smaller to 1 step if you wanted by chaining the filter and the map
Upvotes: 1