How to display the title only once when I iterate over an entire array of items?

Question

I have a function which loop through an array and display contact information about each contact based on a conditional. The title needs to display for each contacts but it should only be displayed once and not with each index of a contact.

Below is what I have so far. Right now, each contact is displaying with the title.

export class ContactsCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contacts: []
    };
  }

  componentWillMount() {
    ...
  }

  generateLists(contacts) {
    let newContacts = [];
    if (contacts !== undefined) {
      contacts.forEach(contact => {
        newContacts.push(contact.organizationContact.contact);
      });
    }
    this.setState({
      contacts: newContacts
    });
  }

  displayPhoneNumber(areaCode, phoneNumber) {
    ...
  }

  renderContact(contacts) {
    return (
      <React.Fragment>
        {
          _.map(contacts, (contact, index) => {
            if(contacts[index].electronicPoc === true) {
              return (
                <div key={'apoc-' + index} id={'apoc-' + index}>
                  <h5>Authorized Subapplicant Representative</h5>
                  <ContactCardDetails
                    contact={contact}
                    displayPhoneNumber={this.displayPhoneNumber}
                  />
                </div>
              );
            } else {
              return (
                <div key={'poc-' + index} id={'poc-' + index}>
                  <h5>Point of Contact</h5>
                  <ContactCardDetails
                    contact={contact}
                    displayPhoneNumber={this.displayPhoneNumber}
                  />
                </div>
              );
            }
          })
        }
      </React.Fragment>
    );
  }

  render() {
    return (
      <div className="poc-cards">
        {this.renderContact(this.state.contacts)}
        {this.state.contacts <= 0 ? 'No Contact Information' : null}
      </div>
    );
  }
}

I want the desired output to look like the following:

Output:

Authorized Subapplicant Representative

• Contact 1
• Contact 2
• Contact 3

Point of Contact

• Contact 1
• Contact 2
• Contact 3

Below is an example of the data format:

"contacts": [
  {
    "contactId": 5020,
    "delInd": false,
    "electronicPoc": true,
    "email": "aor@email.test",
    "firstName": "John",
    "lastName": "Doe",
    "middleInitial": "",
    "address": {
      "addressId": 5038,
      "city": "city example",
      "county": "county example",
      "delInd": false,
      "state": "IA",
      "streetLine1": "808 3RD AVENUE",
      "streetLine2": "",
      "zip": "51249",
      "zipPlus4": "1608"
    },
    "phone": {
      "areaCode": "518",
      "delInd": false,
      "listOrder": null,
      "phoneExtension": "",
      "phoneId": 5026,
      "phoneNumber": "2123109",
      "phoneType": 10
    },
    "fax": {
      "areaCode": "518",
      "delInd": false,
      "listOrder": null,
      "phoneExtension": null,
      "phoneId": 5025,
      "phoneNumber": "2123109",
      "phoneType": 11
    },
  },
  {
    "contactId": 5021,
    "delInd": false,
    "electronicPoc": false,
    "email": "poc@email.test",
    "firstName": "Bob",
    "lastName": "Williams",
    "middleInitial": "",
    "address": {
      "addressId": 5038,
      "city": "City example",
      "county": "county example",
      "delInd": false,
      "state": "DC",
      "streetLine1": "571 STREET AVENUE",
      "streetLine2": "",
      "zip": "12345",
      "zipPlus4": "1212"
    },
    "phone": {
      "areaCode": "518",
      "delInd": false,
      "listOrder": null,
      "phoneExtension": "",
      "phoneId": 5026,
      "phoneNumber": "2123109",
      "phoneType": 10
    },
    "fax": {
      "areaCode": "518",
      "delInd": false,
      "listOrder": null,
      "phoneExtension": null,
      "phoneId": 5025,
      "phoneNumber": "2123109",
      "phoneType": 11
    },
  }
]