Why is this an issue?
Nested ternaries are hard to read and can make the order of operations complex to understand.
function getReadableStatus(job) {
return job.isRunning() ? "Running" : job.hasErrors() ? "Failed" : "Succeeded "; // Noncompliant
}
Instead, use another line to express the nested operation in a separate statement.
function getReadableStatus(job) {
if (job.isRunning()) {
return "Running";
}
return job.hasErrors() ? "Failed" : "Succeeded";
}
Exceptions
This rule does not apply in JSX expressions to support conditional rendering and conditional attributes.
return (
<>
{isLoading ? (
<Loader active />
) : (
<Panel label={isEditing ? 'Open' : 'Not open'}>
<a>{isEditing ? 'Close now' : 'Start now'}</a>
<Checkbox onClick={!saving ? setSaving(saving => !saving) : null} />
</Panel>
)}
</>
);
