Блог

Итак, в настоящее время у меня есть API, который выдает данные центра тестирования на covid из api, и доступ к ним осуществляется через center prop, который передается этому компоненту. Мне было интересно, как условно отобразить кнопку ниже, основываясь на том, есть ли поле номера телефона, доступное в API. Если нет, то просто не отображайте ее.

 const TestingCenter = ({ center }) => {
  return (
    <div className="testing-card">
      <h1>{center.title.slice(22)}</h1>
      <div>
        <h4>{(center.distance / 5280).toFixed(2)} miles away</h4>
        <h3>
          {center.address.houseNumber} {center.address.street},{" "}
          {center.address.city}, {center.address.stateCode}{" "}
          {center.address.postalCode}
        </h3>
        <button>Get Directions</button>
        {center.contacts[0].phone[0].value amp;amp; (
          <button
            onClick={() => console.log(center.contacts[0].phone[0].value)}
          >
            Call Site
          </button>
        )}
      </div>
    </div>
  );
};
export default TestingCenter;
 

Этот компонент TestingCenter отображается и отображается один раз для каждого центра тестирования, доступного из API.
Когда я пытаюсь сделать это выше, я получаю «TypeError: не удается прочитать свойство ‘0’ из undefined».

Это может сработать

 {center.contacts amp;amp; center.contacts[0].phone[0].value(
          <button
            onClick={() => console.log(center.contacts[0].phone[0].value)}
          >
            Call Site
          </button>
)}