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.
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;
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;