React Ravenous Part 2

Hello, I’m currently working on the second part of the Ravenous project here: https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-two/projects/passing-information. I’m getting the error ‘Cannot read property ‘map’ of undefined’ in relation to line 9 of BusinessList.js.

Here is the BusinessList component which is throwing the error.

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

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

export default BusinessList;

Here is App.js where businesses is defined.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import BusinessList from './components/BusinessList/BusinessList.js';
import SearchBar from './components/SearchBar/SearchBar.js';

const business = {
  imageSrc: 'https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg',
  name: 'MarginOtto Pizzeria',
  address: '1010 Paddington Way',
  city: 'Flavortown',
  state: 'NY',
  zipCode: '10101',
  category: 'Italian',
  rating: 4.5,
  reviewCount: 90
}

const businesses = [
  business,
  business,
  business,
  business,
  business,
  business
];

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>ravenous</h1>
        <SearchBar />
        <BusinessList business={businesses}/>
      </div>
    );
  }
}

export default App;

And here is the Business component which was also worked on as part of the exercise, but which I don’t think is causing the issue.

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

class Business extends React.Component {
  render() {
      return (
        <div className="Business">
          <div className="image-container">
            <img src={this.props.business.imageSrc} alt=''/>
          </div>
          <h2>{this.props.business.name}</h2>
          <div className="Business-information">
          <div className="Business-address">
            <p>{this.props.business.address}</p>
            <p>{this.props.business.city}</p>
            <p>{this.props.business.zipCode}</p>
          </div>
          <div className="Business-reviews">
            <h3>{this.props.business.category}</h3>
            <h3 className="rating">{this.props.business.rating}</h3>
            <p>{this.props.business.reviewCount}</p>
          </div>
        </div>
      </div>
    )
  }
}

export default Business;

Can anyone help? I’m a bit stumped!

Thank you!

Sorry, should have said, line 9 of BusinessList.js is:

this.props.businesses.map(function(business) {

Thanks!

I managed to fix it!

In app.js I had referred to

<BusinessList business={businesses} /> 

instead of

<BusinessList businesses={businesses} />.

Got there in the end!

4 Likes

Thanks for writing how you solved this. Same thing happened to me! :woman_facepalming:

1 Like

rant mode on

Why on earth does Codecademy name everything the same thing? This causes so much unnecessary confusion and is a pain to follow.

“Set a callback function with an argument ‘business’. Call the business component and set the business property of the businessc ompoonent equal to the business parameter of the callback function”

errr… business.business = business - business squared?

Seriously!

Have you tried {this.business} instead of {business} as below?