如何根据来自 api 的数据是否可用有条件地在 React js 中呈现按钮？

Question

So, I currently have an API that gives out covid testing center data from an api, and this is accessed through the center prop that is passed to this component. I was wondering how to conditionally render the button below based on if there is a phone number field available in the API. If not, then just not render it.

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 && (
          <button
            onClick={() => console.log(center.contacts[0].phone[0].value)}
          >
            Call Site
          </button>
        )}
      </div>
    </div>
  );
};
export default TestingCenter;

This component TestingCenter is being mapped and displayed once for each testing center available from API. When I try this above I get "TypeError: Cannot read property '0' of undefined."

Answer 1

This may work

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