Im used to do this kind of code using ejs, is there an equivalent way of doing this using react?
What Im trying:
I need to create a new to each aux.Complements elements, the problem is that I cant do {return complement.title} inside html elements
{item.ComplementCategories.map(aux => {
aux.Complements.map(complement => {
<tr>
<td>
{complement.title}
</td>
</tr>
})
})}
What I get:
Expected an assignment or function call and instead saw an expression no-unused-expressions
Advertisement
Answer
Based on @DennisVash comment I came up with the following solution
item.ComplementCategories.map(aux => {
return aux.Complements.map(complement => {
return <tr className="tableList--complements">
<td className="text-left">
{complement.title}
</td>
<td className="text-center"> - </td>
<td className="text-right">
R$ {complement.price_un}
</td>
<td className="text-center">
{complement.quantity}X
</td>
<td className="text-right">
-
</td>
<td className="text-right">
-
</td>
</tr>
})
})
Returned a html element and accessing the data through {}
Can also Help