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

Question

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: [],
    }
  }

Ben West · Accepted Answer · 2018-05-01 14:46:05Z

1

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.

answered May 1, 2018 at 14:46

Ben West

4,5861 gold badge19 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eik Hunter Over a year ago

Thank you, need to find that duck again!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related