Тернарный оператор в React / JSX не работает

Question

Я сопоставляю данные из извлечения API eBay и пытаюсь отобразить значок, если значение равно true или ничего, если false.

Поле называется bestOfferEnabled и может иметь значение «true». или false.

Это пример набора данных https://pastebin.com/mqCscKss/

Я пытаюсь это:

{item.listingInfo[0].bestOfferEnabled === true && (
            <i className="fas fa-comment-dollar"></i>
          )}

, и значок не генерируется. Я также пробовал различные версии этого, включая true в кавычках, но ничего не работает.

Когда я просто пытаюсь вывести текст на странице, сделав это:

{item.listingInfo[0].bestOfferEnabled}

он печатаетиз истинного или ложного значения

Answer 1

Это потому, что bestOfferEnabled является ключом для массива:

listingInfo: [{
    bestOfferEnabled: [
        "false"
    ],
}]

Так что вам придется сделать это:

{item.listingInfo[0].bestOfferEnabled[0] === true && (
            <i className="fas fa-comment-dollar"></i>
)}

Вы также можете использовать every Метод массива, обеспечивающий истинность всех значений в массиве:

{item.listingInfo[0].bestOfferEnabled.every(key => key) && (
            <i className="fas fa-comment-dollar"></i>
)}

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

РЕДАКТИРОВАНИЕ : как кто-то указал, ваши логические значенияявляются строками, в этом случае вы можете использовать JSON.parse для их преобразования.

{item.listingInfo[0].bestOfferEnabled.every(key => JSON.parse(key)) && (
            <i className="fas fa-comment-dollar"></i>
)}

Это должно сработать.