Trying to display different value depending on other values in React

Question

I have this conditional rendering

      {livematchcard.event.status_name != "Ολοκληρώθηκε" ? "Τελικό"

                            : (livematchcard.event.sport_id == 4 ? (
                                (livematchcard.event.status_id == 134 ? livematchcard.periods[0] : null)
                                (livematchcard.event.status_id == 65 ? livematchcard.periods[1] : null)
                                (livematchcard.event.status_id == 135 ? livematchcard.periods[2] : null)
                                (livematchcard.event.status_id == 136 ? livematchcard.periods[3] : null)
                                (livematchcard.event.status_id == 137 ? livematchcard.periods[4] : null)
                            ) : livematchcard.event.clock_time)
                        }

So, the problem is that I can see the clock time where I should but if a condition inside is met for example is status_id is 134 I get the following error which I cannot seem to understand Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value) is not a function. I also tried to change the code to this livematchcard.event.status_id == 134 && livematchcard.periods[0] where I get the following error

livematchcard.periods[0] is not a function

I would recommend pulling most of that logic out into a switch statement, and setting a single variable to the relevant livematchcard.periods[x] value. That can then be rendered inline without a wall of ternary statements. — DBS
– DBS, Commented Aug 9, 2023 at 14:04
thank you for the reply. Is it possible to write switch inside the : in ternary? — agrotis2231
– agrotis2231, Commented Aug 9, 2023 at 14:07
@agrotis2231: The structure here is broken. When you have (some_expression)(another_expression) then that means the result of some_expression is to be invoked as a function and passed the result of another_expression as the argument to that function. Which clearly isn't the intent here. But then what is the intent? It appears that you've confused yourself with the structure, making the actual intent unclear. Outside of React, isolate just this logic and define exactly what this overall expression should be resolving to. — David
– David, Commented Aug 9, 2023 at 14:11

HugoD · Accepted Answer · 2023-08-09 14:29:26Z

The error you're encountering is related to the structure of your ternary conditional expressions.

In JSX, when you have complex expressions within JSX curly braces, it's important to make sure you're using the correct syntax. You can't directly chain multiple ternary expressions together like you're attempting to do.

To achieve your desired conditional rendering, you can modify your code as follows:

{
  livematchcard.event.status_name !== "Ολοκληρώθηκε"
    ? "Τελικό"
    : livematchcard.event.sport_id === 4
    ? livematchcard.event.status_id === 134
      ? livematchcard.periods[0]
      : livematchcard.event.status_id === 65
      ? livematchcard.periods[1]
      : livematchcard.event.status_id === 135
      ? livematchcard.periods[2]
      : livematchcard.event.status_id === 136
      ? livematchcard.periods[3]
      : livematchcard.event.status_id === 137
      ? livematchcard.periods[4]
      : null
    : livematchcard.event.clock_time
}

In this code snippet, I've properly nested the ternary expressions to achieve the desired conditional rendering. Make sure to carefully match opening and closing parentheses and curly braces.

Collectives™ on Stack Overflow

Trying to display different value depending on other values in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related