CODEWITHSUNDEEP
cssreactjs
Lex V
Lex V

Reputation: 1447

Map and filter confusion

I'm in little confusion about map and filter function, please help me to sort out my problem.

Here is my code. I want to highlight only the selected row. But now the whole row get highlighted when I select one row.

  {DocumentList && DocumentList.map(Doc =>
 <tr key={Doc.DocID}  className={selectedDocumentsForAttach.length !==0 && selectedDocumentsForAttach.filter(o => (o.DocID === Doc.DocID))?"print-table-row_hyLight":'print-table-row'}>

Upvotes: 0

Views: 78

Answers (2)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Filter will return an array so you have to use .length with .filter function. Try the below condition for you highlight class,

<tr key={Doc.DocID}  className={
     (selectedDocumentsForAttach.length && // checking .length is enough for true value
      selectedDocumentsForAttach.filter(o => (o.DocID === Doc.DocID)).length
     ) ? 'print-table-row_hyLight' : 'print-table-row'}>

Upvotes: 1

giuseppedeponte
giuseppedeponte

Reputation: 2391

Your ternary condition should evaluate to a boolean. Instead of .filter you should use .some which returns true if at least one of your argument function calls returns true. Cf. MDN

Upvotes: 4

Related Questions