Ravenous Project part 2 Type Error

I just finished part 2 of the Ravenous Project and I keep getting an TypeError: Cannot read property ‘imageSrc’ of undefined in Business.render. I have gone through the steps twice and watched the help video twice. Nothing is popping out at me, and this is day 2 of looking at it. I am not sure why it is happening. Here is my Business.js file:

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

class Business extends React.Component {

       const {business} = this.props;

       return (
           <div className="Business">
               <div className="image-container">
                   <img src= {business.imageSrc} alt=''/>
               <div className="Business-information">
                   <div className="Business-address">
                   <p>{business.state} {business.zipCode}</p>
                   <div className="Business-reviews">
                   <h3 className="rating">{business.rating}</h3>
export default Business;

the App,js:

import React from 'react';
import './App.css';
import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';

const business = {
  imageSrc: 'https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg',
  name: 'Changeria 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{
      <div className="App">
        <SearchBar />
        <BusinessList businesses = {businesses}/>

export default App;

and BusinessList.js

import React from 'react';
import './BusinessList.css';
import Business from '../Business/Business';
 * The point of this component is to simulate what a returned
 * of businesses would look like in Ravenous (after querying
 * the Yelp API) using the buisness componenet

 //buisnesslist component
 class BusinessList extends React.Component{
            <div className="BusinessList" >
                        return <Business business = {this.business} />


 //export component
 export default BusinessList;

I’ll probably restart the project a couple of more times, and If I end up finding the answer, I’ll post it here. Otherwise any help or advice would be greatly appreciated.

Hello, @obbes, and welcome to the forums!

In your BusinessList component, you have this line:

Try removing this. You need to set the <Business /> property business equal to the parameter of the map function. It’s just business not this.business.

1 Like

This topic was automatically closed 18 hours after the last reply. New replies are no longer allowed.