So I have a list of initial selected items which I receive from the parent component. something like this
props.initialSelectedItems = [{id:1, name: 'itemABC'}, {id: 10, name: 'helloWorld'}]
In this same component I have the an array with all the available items:
itemsArr = [{id:1, name: 'itemABC'}, {id: 2, name: 'item123'}.... {id:100, name:'OneMoreItem'}]
So I want to render this list and when theres a match with the item on props.initialSelectedItems
I want to add a className to that item. So I have the following code
const checkInitialState = (itemId: number): boolean => {
for (let i = 0; i<props.initialSelectedItems.length; i++) {
const initial = props.initialSelectedItems[i];
return initial.id === itemId;
}
}
const createItemRows = (itemsArr: Item[]): any => {
let resultsRow= [];
for(let i=0; i<itemsArr.length; i++){
const item: Item = itemsArr[i];
const isInitialSelected: boolean = checkInitialState(item.id);
resultsRow.push(
<div key={i}
className={`list__row ${isInitialSelected && 'initial-selected'}`}
>
.....
So my problem is that it only return true for one of the matched items. What am I doing wrong?