In my project, I have a collection called tagsList that contains approximately 20 tags, and another array called termIds which holds up to 3 tag ids.
My current task involves identifying tags in the tagsList that match the ids in termIds, and then applying specific styling to them. I am looking to achieve this without using traditional for loops or object-oriented programming, and instead, opting for a functional programming approach with the help of Ramda curry.
A typical tag in the tagsList looks like this:
{
term: 'hi',
id: 123
}
An example of termIds could be [123, 345, 678]
My objective is to iterate through the tags in the tagsList and assign a new key like border1:true, border2:true, and so on, based on the matching tag ids present in termIds.
Goal:
The main goal is to compare the tag ids in the tagsList with those in termIds and apply specific styling to the matching tags. Each matched tag should receive a unique border style, such as border1, border2, and border3 based on the matching order.
Initial Approach:
const checkId = _.curry((term_id, tag) => {
if (tag.id === term_id) {
console.log('match found!', tag)
}
});
const matchId = checkId(termIds);
const coloredTags = R.map(matchId, tagsList);
console.log('coloredTags', coloredTags)
return tagsList;
However, this approach failed as I mistakenly preloaded the entire termIds array into the checkId function instead of loading individual items.
Subsequently, I attempted the following solution, which I anticipated would work but encountered an unexpected error:
const matchId = R.forEach(checkId, termIds);