Ravenous Part 4 error

Get Help React.js
#1

Hi, I am getting the below error. My map property is undefined. Any help would be much appreciated!

Screenshot 2020-08-06 at 10.58.12
Screenshot 2020-08-06 at 10.58.122211Ă—875 101 KB

Here is my code for the BusinessList file.

import React from 'react';
import './BusinessList.css';
import Business from '../Business/Business';

class BusinessList extends React.Component {
  render(){
    return(
      < div className="BusinessList">
        {this.props.businesses.map(business => {
          return <Business business={business} key={business.id}/>
        })}
      < /div>
    )
  }
}

export default BusinessList;
#2

You have to double check what’s inside your map(). Is there any syntax error inside, are the references going to return valid inputs etc. If it’s validity of the input, the error points to a potentially bigger issue.

Welcome to the forums!

1 Like
#3

The item you are attempting to call .map() on is the businesses prop of the BusinessList component, which is passed down from the App component.

If I were you, I would start by looking at the value that you’re passing down as a prop in App.js and checking it’s valid - because React seems to think otherwise. :slight_smile:

#4

Hi,
Many thanks for your helpful reply. I will look what value I am attempting to pass down from my App.js file and try and fix it.

1 Like
#5

No worries.

If you get stuck, come back and let us know - but we’ll need a complete copy of your code (the JS files for every component) to be able to help any further. :slight_smile:

Also, take a look either at how I edited your original post or this topic to see how to correctly format code when you’re posting it here. :slight_smile:

#6

It turned out to be a simple spelling mistake that after an hour of looking at my code last night I couldn’t see it but as soon as I looked this morning I spotted it straight away.

1 Like
#7

Glad to hear you’ve sorted it. :+1: