Назначить className условно на основе свойства исходного объекта

Question

У меня есть условное выражение внутри функции React, которое добавляет условный класс CSS.

Когда я добавляю значение по умолчанию для всех остальных значений, статус получает класс isUnPublished вместо получения 'default' class ..

Если я оставлю значение по умолчанию в двух первых значениях, он покажет класс по умолчанию из последнего значения.

Код:

СТАТУС. JS:

    const StatusIndicator = (props) => {

    const articleStatus = [

        {
            id: 1,
            name: "published",
            isPublished: false
        },
        {
            id: 2,
            name: "unpublished",
            isUnPublished: false
        },
        {
            id: 3,
            name: "draft",
            isApproved: false
        }
    ]

    return (
        <div className={classes.root}>

 {articleStatus.map(status => <span key={status.id} 
    className={ 
    status.isPublished ? 'published' : 'default' ||
    status.isUnPublished ? 'unpublished' : 'default'|| 
    status.isApproved? 'draft' : 'default'
     }> </span>)}

        </div>
    )
}

export default StatusIndicator;

CSS:

.published {
    background: rgb(75, 210, 143);
    display: flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.unpublished {
    background: rgb(255, 77, 77);
    display: flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.draft {
    background: rgb(255, 204, 103);
    display: flex;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.default {
    height: 10px;
    display: flex;
    width: 10px;
    background: #c1c1c1;
    border-radius: 50%;
}

Answer 1

Похоже, вы неправильно используете тернарный оператор. Я думаю, это должно быть что-то вроде:

className={ 
    status.isPublished ? 'published' :
    status.isUnPublished ? 'unpublished' : 
    status.isApproved? 'draft' : 'default'
}

Answer 2

Для удобства чтения можно вынести вычисления имени класса в отдельный метод

const getClassName = status => {
    switch (true) {
        case status.isPublished:
            return 'published';
        case status.isUnPublished:
            return 'unpublished';
        case status.isApproved:
            return 'draft';
        default:
            return 'default';
    }
};

...

return (
    <div className={classes.root}>
        {articleStatus.map(status => (
            <span key={status.id} className={getClassName(status)}></span>
        ))}
    </div>
);