CODEWITHSUNDEEP
javascriptreactjs
Eik Hunter
Eik Hunter

Reputation: 87

How to define a .map list in a React component that has an empty array?

I have two lists that I want to update dynamically if clicked it will move the item in the array to either the 'archived' list or the 'favourite' list, I have mapped each list which is stored in a parent components state but I get the error of x is undefined, so I do a check to see if the array has more than one item in it, but it then makes the list's unavailable and throws the error of each list not being defined, I am not sure on how to correctly render each array when there isn't any initial items. Code follows below

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

Parent component state for reference:

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

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

Upvotes: 1

Views: 39

Answers (1)

Ben West
Ben West

Reputation: 4596

You're doing props.favourites.results.map, which would work on this structure:

var props = {
    favourites: {
        results: []
    }
}

But you have this structure:

var props = {
    favourites: []
}

So favourites.results is undefined, which means favourites.results.map is equivalent to undefined.map, which is a ReferenceError.

Upvotes: 1

Related Questions