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 {

   render(){
       const {business} = this.props;

       return (
           <div className="Business">
               <div className="image-container">
                   <img src= {business.imageSrc} alt=''/>
               </div>
               <h2>{business.name}</h2>
               <div className="Business-information">
                   <div className="Business-address">
                   <p>{business.address}</p>
                   <p>{business.city}</p>
                   <p>{business.state} {business.zipCode}</p>
                   </div>
                   <div className="Business-reviews">
                   <h3>{business.category}</h3>
                   <h3 className="rating">{business.rating}</h3>
                   <p>{business.reviewCount}</p>
                   </div>
               </div>
           </div>
       );
   }
}
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{
  render(){
    return(
      <div className="App">
        <h1>Ravenous</h1>
        <SearchBar />
        <BusinessList businesses = {businesses}/>
      </div>
    );
  }
}

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{
     render(){
         return(
            <div className="BusinessList" >
                {
                    this.props.businesses.map((business)=>{
                        return <Business business = {this.business} />
                    })
                }
             
            </div>

         );
     }
 }

 //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.
Thanks!

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.