Hello,
I’m having an issue completing the second part of the ‘Ravenous’ project in the ‘Introduction To React’ section of ‘Build Front-End Web Applications from Scratch’.
I’ve gone through all 10 steps and the problem is that the six business listings I have do not include any data, i.e. they are just placeholders (see image below).
My code for App.js, Business.js and BusinessList.js is as follows:
App.js
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 businesses={businesses} />
</div>
);
}
}
export default App;
Business.js
import React from 'react';
import './Business.css';
class Business extends React.Component {
render() {
return (
<div className="Business">
<div className="image-container">
<img src="{business.imageSrc}" alt="{business.name}" />
</div>
<h2>{this.props.name}</h2>
<div className="Business-information">
<div className="Business-address">
<p>{this.props.address}</p>
<p>{this.props.city}</p>
<p>{this.props.state} {this.props.zipCode}</p>
</div>
<div className="Business-reviews">
<h3>{this.props.category}</h3>
<h3 className="rating">{this.props.rating} stars</h3>
<p>{this.props.reviewCount} reviews</p>
</div>
</div>
</div>
);
}
};
export default Business;
BusinessList.js
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(function(business) {
return <Business business={business} />;
})
}
</div>
);
}
};
export default BusinessList;
Any assistance will be much appreciated.