0

I am new to React, so hopefully it's not a silly question but I have been getting the error below when I ran the code. enter image description here

I believe the error is related to one of the two files' codes below. Can someone help me to see where I'm making a mistake?

App.js file:

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: '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 businesses={businesses} />
</div>
);}}


export default App;

Business.js file:

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

class Business extends React.Component {
    render() {
      const { business } = this.props;
      return (
        <div className="Business">
        <div className="image-container">
          <img src='https://s3.amazonaws.com/codecademy-content/programs/react/ravenous/pizza.jpg' 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} stars</h3>
            <p>{business.reviewCount} reviews</p>
          </div>
        </div>
      </div>
    );
    }
}

export default Business;
3
  • I think more likely the error is in the component BusinessList, can you share the code for that as well?
    – Milton
    Commented Jun 4, 2020 at 21:22
  • It didn't let me add more code so hopefully it's readible: 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={this.business} />;}) } </div> ); } } export default BusinessList;
    – B_12
    Commented Jun 4, 2020 at 21:25
  • 1
    Your issue is using {this.business} when it should just be {business}, consider adding ESLint to help you catch unused variables :)
    – Milton
    Commented Jun 4, 2020 at 21:28

2 Answers 2

1

The error seems to be in your BusinessList component.

you pass this.business as a prop to Business but it should just be business (the name of the parameter use in the .map function)

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} />;
        })}
      </div>
    );
  }
}
export default BusinessList;
1

In Business.js file try to change code like this

return business && (
    ...
);

if business is undefine then it returns null. Or if it doesn't work try to use ?: operator like

return business ? (...) : null;

Hope this help you to resolve issue

2
  • While this is a good way to make code more "error" proof, I think the real answer should be to first understand WHY it is undefined (code error or business error). If it is expected that the business could be null/undefined then this is a good solution but if it should never be null this just hides the errors.
    – Milton
    Commented Jun 4, 2020 at 21:30
  • Yes correct answer is business={business} instead of this.business. I didn't look at the updated comments in the issue so I suggested above code snippet.
    – Bojan
    Commented Jun 4, 2020 at 21:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.