i have code like below,
const variableType = 'INTEGER';
const editedValue = 100;
const defaultValue = 4;
return (
isOpen ? (
<span>something</span>
) : (
<>
{(variableType ?? '').toUpperCase() === 'BOOLEAN'
? capitalize(editedValue ?? '')
: {editedValue}
</>
);
Now i want to add is when this variableType is not boolean and editedValue is not same as defaultValue i want to show an icon along with editedValue
if variableType is not boolean and edited Value is same as defaultValue i want to just show editedValue.
i have tried something like so,
return (
isOpen ? (
<span>something</span>
) : (
<>
{(variableType ?? '').toUpperCase() === 'BOOLEAN'
? capitalize(editedValue ?? '')
: {editedValue !== defaultValue && (
<Icon />
}
{editedValue}
</>
);
But the above doesnt seem right syntatically.
how can i change the above ternary operator to satisfy above condition and show icon. could someone help me with this. i am new to using ternary operator. thanks.
The key here is understanding what parts are in JSX elements and what parts aren't. When you're in an element or fragment, you're in a JSX element and you use {...} to insert values or code. When you're inside {...}, you're not in a JSX expression.
I think you probably want:
return (
isOpen ? (
<span>something</span>
) : (
(variableType ?? '').toUpperCase() === 'BOOLEAN'
? capitalize(editedValue ?? '')
: <>
{editedValue !== defaultValue && <Icon />}
{editedValue}
</>
);
....but I would suggest you break that up to make it easier to read and maintain. For instance:
if (isOpen) {
return <span>something</span>;
}
if ((variableType ?? '').toUpperCase() === 'BOOLEAN') {
return capitalize(editedValue ?? '');
}
return <>
{editedValue !== defaultValue && <Icon />}
{editedValue}
</>;
if (isOpen) return <span>something</span>
return (
<>
{(variableType ?? '').toUpperCase() === 'BOOLEAN'
? capitalize(editedValue ?? '')
: <>
{editedValue !== defaultValue && <Icon />}
{editedValue}
</>
}
</>
)