Ravenous II Project Help

[pahiggins]

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

https://www.codecademy.com/courses/ravenous/projects/passing-information?program_content_id=3a4d36945718878c1752a98cbba52198&program_id=3741d64c939020a6d8549ca8d434318e

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.

[pahiggins]

I realised that ‘this.props’ needs amending to ‘this.props.business’ in Business.js, i.e.

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

class Business extends React.Component {
  render() {
    return (
      <div className="Business">
        <div className="image-container">
          <img src="{this.props.business.imageSrc}" alt="{this.props.business.name}" />
        </div>
        <h2>{this.props.business.name}</h2>
        <div className="Business-information">
          <div className="Business-address">
            <p>{this.props.business.address}</p>
            <p>{this.props.business.city}</p>
            <p>{this.props.business.state} {this.props.business.zipCode}</p>
          </div>
          <div className="Business-reviews">
            <h3>{this.props.business.category}</h3>
            <h3 className="rating">{this.props.business.rating} stars</h3>
            <p>{this.props.business.reviewCount} reviews</p>
          </div>
        </div>
      </div>
    );
  }
};

export default Business;

Implementing this change has meant that the hard coded business details are now displayed in my app (see image below).

That said, for some reason the six images are not displaying. Any idea why?

[pahiggins]

I removed the " " from img src and img alt and the images display correctly, so I assume you’re not meant to use " " when passing information between components. Updated code shown below.

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

class Business extends React.Component {
  render() {
    return (
      <div className="Business">
        <div className="image-container">
          <img src={this.props.business.imageSrc} alt={this.props.business.name} />
        </div>
        <h2>{this.props.business.name}</h2>
        <div className="Business-information">
          <div className="Business-address">
            <p>{this.props.business.address}</p>
            <p>{this.props.business.city}</p>
            <p>{this.props.business.state} {this.props.business.zipCode}</p>
          </div>
          <div className="Business-reviews">
            <h3>{this.props.business.category}</h3>
            <h3 className="rating">{this.props.business.rating} stars</h3>
            <p>{this.props.business.reviewCount} reviews</p>
          </div>
        </div>
      </div>
    );
  }
};

export default Business;