How can I change the style after mapping the array with js?-CodePudding

I would like to change the color to green of the element "tr.amount" if its > 0

I tried with the code below but it gives me this error: Uncaught TypeError: Cannot set properties of undefined (setting 'color')

Thanks in advance!

{userData.transactions.length > 0 &&
   userData.transactions.map((tr) => (
       <tr className="border">
         <td> <span className="history-category">{tr.category}</span></td>
         <td className="amount">{tr.amount > 0 ? tr.amount.style.color = "green" : tr.amount.style.color = "red"}</td>
         <td>{tr.date}</td>
       </tr>
))}

CodePudding user response：

You probably want to use the style property of the td itself. Something in lines of

<td className="amount" style={{ color: tr.amount > 0 ? "green" : "red" }}>
  My Content
</td>

CodePudding user response：

You have tr.amount.style.color instead of tr.style.color.