Как избежать вложенных тернарных выражений в моем коде?

Да, но мой линтер недоволен: 44:16 error Do not nest ternary expressions [no-nested-ternary]

Если это ваша единственная проблема, то решение простое. Создайте свою собственную условную функцию:

const iff = (condition, then, otherwise) => condition ? then : otherwise;

props => ({
  iconColor: props.isPriority ?
    iff(props.isCompleted, variables.color.lightpurple, variables.color.purple) :
    variables.color.gray3,
  iconName: props.isPriority ? 'star-full' : 'star-empty',
})

Теперь ваш линтер не должен жаловаться. При этом вы должны отключить [no-nested-ternary] в своем линтере. Довольно глупо, что ваш линтер считает вложенные условные операторы плохими.

В этом случае вы можете рассмотреть возможность инвертирования условия, чтобы удалить «неестественное» вложение троичных элементов. Вложенность по-прежнему будет, но ее можно написать плоской — без круглых скобок — что означает, что вы можете аккуратно разложить ее по нескольким строкам:

props => ({
    iconColor:
        !props.isPriority ? variables.color.gray3
        : props.isCompleted ? variables.color.lightpurple
        : variables.color.purple,
    iconName: props.isPriority ? 'star-full' : 'star-empty',
})

Обратной стороной этого является использование отрицательного условия, которого я обычно стараюсь избегать, поскольку им немного сложнее следовать, чем положительным условиям.

Еще один вариант — сгладить условия с помощью &&:

props => ({
    iconColor:
        props.isPriority && props.isCompleted ? variables.color.lightpurple
        : props.isPriority ? variables.color.purple
        : variables.color.gray3,
    iconName: props.isPriority ? 'star-full' : 'star-empty',
})

Я согласен с @JaromandaX об использовании функции. Это сохраняет ваш JSX в чистоте, а вашу логику можно использовать повторно.

Кроме того, чтобы избежать вложенного тернарного оператора, вы можете попробовать что-то вроде этого:

• Сохраняйте массив/карту всех возможных значений
• На основе флагов создайте двоичную строку и преобразуйте ее в число.
• вернуть значение по указанному индексу

function withTernary(a, b){
  return a ? (b ? 'test': 'foo') : 'bar';
}

function withoutTernary(a, b){
  var result = ['bar', undefined, 'foo', 'test'];
  // or may be a map
  /*
  * map = {
  *    '00': 'bar',
  *    '10': 'foo',
  *    '11': 'test'
  * }
  */
  var index = parseInt((+a) + '' + (+b), 2);
  return result[index];
}

var testCase = [[0,0], [1, 0], [1,1]];

testCase.forEach(x => {
  console.log('With Ternary:', withTernary(...x));
  console.log('Without Ternary:', withoutTernary(...x));
})

Можно было бы использовать IIaFE (немедленно вызываемое выражение функции стрелки):

props => ({
        iconColor:(_=>{
           if(props.isPriority){
             if(props.isCompleted){
               return variables.color.lightpurple;
             }
             return variables.color.purple;
           }
           return variables.color.gray3;
        })(),
        iconName:(_=>{ 
           if(props.isPriority){
              return 'star-full';
           }
           return 'star-empty';
       })()
}))