У меня есть условное выражение внутри функции 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%;
}