Why is this code block not executing in my JSX?

Question

I'm making a simple bit of JSX that returns different text based on the value of a variable passed in from the back end. Although the card is displayed correctly up to and including the {irr} , the code block with the ifs is simply not executing. There are no errors in the build process or browser, and none of the console.log statements are logged either.

I've done this successfully a few times before, even copy-pasting some of the code from another (working) part of the project as the basis of this bit, and it's pretty simple so I'm not sure where to start trying to figure out what I've done wrong here.

Any ideas?

        <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>

Answer 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>