CODEWITHSUNDEEP
reactjsfunctionhtml-table
user6080689
user6080689

Reputation:

Why the function inside <td> did not run

I want to render the table data like below.

enter image description here

However, the second line of "Available Channel" return value is number and I want to get the string. like 0--None, 1--Web, 2--Pos....

I try to use the paymentType function to switch it but it did not work. It seems that this function did not run at all. But I do not know why

<table>
 ...
 <tr>
  <td> { this.paymentType(id) } </td>
 <tr>
</table>

And the function I wrote likes:

paymentType(id){
if(id===0) { return "None"}
else if(id===1) { return "Web"}
else if(id===2) { return "Pos"}
}

I only got a blank line.

I changed it to arrow function, still a blank line.

 <table>
 ...
 <tr>
  <td> { () => this.paymentType(id) } </td>
 <tr>
</table>

I bind this in the constructor method, still a blank line.

constructor(props){
  super(props)
  this.paymentType = this.paymentType.bind(this)
}

enter image description here

I wonder how to solve this problem and all your replies would be appreciated.

Upvotes: 0

Views: 47

Answers (1)

Mark Williams
Mark Williams

Reputation: 2308

Just call your paymentType function directly, don't wrap it an an arrow function declaration:

{ this.paymentType(payment.payment_type_id) }

As you had it you efectively had a function declaration in the curly braces, you were not calling your helper function.

Upvotes: 2

Related Questions