Search code examples
javascriptreactjsmaterial-uiconditional-operator

cannot render mui icon in react ternary condition

I'm trying to render a mui icon if a condition is met but it is crashing my app. I believe it's probably because I'm calling PriceCheckIcon in {}. any help?

<span
            style={
              Price > cinemaWorldPrice ? { color: "green" } : { color: "red" }
            }
          >
            {error && Price > cinemaWorldPrice ? (
              <div>{PriceCheckIcon}</div>
            ) : (
              Number(cinemaWorldPrice).toFixed(2)
            )}
          </span>

Error message:

react-dom.development.js:14757 Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare}). If you meant to render a collection of children, use an array instead
Solution

  • PriceCheckIcon needs to be used in JSX form.

    Change:

    <div>{PriceCheckIcon}</div>

    to

    <PriceCheckIcon />