Как определить список .map в компоненте React с пустым массивом?

У меня есть два списка, которые я хочу обновлять динамически, если щелкнуть, он переместит элемент в массив либо в «заархивированный» список, либо в «избранный» список, я сопоставил каждый список, который хранится в состоянии родительских компонентов, но я получаю ошибка x не определена, поэтому я проверяю, есть ли в массиве более одного элемента, но затем он делает список недоступным и выдает ошибку каждого списка, который не определен, я не уверен, как правильно отображать каждый массив, когда нет начальных элементов. Код следует ниже

import React from 'react'
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

import PropertyCard from '../../card/Property/index'

import '../../../../../sass/includes/sidebar/Result/sidebar.scss'

const ResultsSideBar = (props) => {
  const favourites = props.favourites.results.map((result) =>
    <li className = "fvt-List_Item">
      <PropertyCard
        key = {result.id}
        title = {result.title}
        price = {result.price}
        beds = {result.beds}
        bathrooms = {result.bathrooms}/>
    </li>
  )

  const archived = props.archived.results.map((result) =>
    <li className = "fvt-List_Item">
      <PropertyCard
        key = {result.id}
        title = {result.title}
        price = {result.price}
        beds = {result.beds}
        bathrooms = {result.bathrooms}/>
    </li>
  )

  return (
    <Tabs className = "rst-SideBar">
      <TabList className = "rst-SideBar_Tabs">
        <Tab className = "rst-SideBar_Tab">
          <p className = "rst-SideBar_Text">0 Favourites</p>
        </Tab>
        <Tab className = "rst-SideBar_Tab">
          <p className = "rst-SideBar_Text">Archived</p>
        </Tab>
      </TabList>

      <TabPanel className = "rst-SideBar_TabContent rst-SideBar_TabContent-favourites">
        <div className = "fvt-List">
          <ul className = "fvt-List_Items">
            {props.favourites.length ? {favourites} : <div>You have no favourites. </div>}
          </ul>
        </div>
      </TabPanel>

      <TabPanel className = "rst-SideBar_TabContent rst-SideBar_TabContent-archived">
        <div className = "fvt-List">
          <ul className = "fvt-List_Items">
            {props.archived.length ? {archived} : <div>You have no archived items. </div>}
          </ul>
        </div>
      </TabPanel>
    </Tabs>
  )
}

export default ResultsSideBar

Состояние родительского компонента для справки:

class Results extends React.Component{
  constructor(props) {
    super(props)

    this.state = {
      results: resultsData,
      favourites: [],
      archived: [],
    }
  }