Why is this code block not executing in my JSX?

Solution 1:

with this way you have just bringing function inside the jsx, also you should execute using parentheses. But I want to recommend you define another function outside this block for the purpose of decreasing cognitive complexity.

https://en.wikipedia.org/wiki/Immediately_invoked_function_expression

For example

    {(()=>{
        // Your if blocks
    })()}

Paste it.

<Card style={{ width: "72rem" }} className="mt-3 mr-2 ml-2">
<Card.Body>
  <Card.Title className={classes.card}>{cardData.company}</Card.Title>
  <Card.Text className={classes.card}>
    {cardData.company} was bought 5 years ago for 
    €{purchasePrice}.
    At this time, the equity contribution of the PE owner was
    €{totalCF} as the deal was leveraged with a
    €{debtFinancing} term loan. Post-transaction, the PE firm received the intererim Free Cash Flow to Equity plus the current selling price minus the loan repayment. The total cash flows for the PE firm resulted in a  
    {irr}
    {(() => {
      console.log("In");
      if (irr > 0.15) {
        console.log("A");
          return (
            <span>
            Given the IRR is above the 15% target, the PE client is likely to deepen the relationship with the advisory team. In other words, {advisorName}  has done a good job.
            </span>
          );
        } else if (irr <= 0.1) {
        console.log("B");
          return (
            <span>
            Given the IRR is way below the 15% target, the PE client might stop working with its advisors,  {advisorName}.
            </span>
          );
        } else {
        console.log("C");
          return (
            <span>
            Given the IRR is below the 15% target, the relationship between the PE client and its advisor,  {advisorName}, has deteriorated.
            </span>
          );
        }
    })()}
  </Card.Text>
</Card.Body>
</Card>