Ravenous Business Component

Get Help React.js
#1

I’ve finished Ravenous 4 and I thought it was a really enjoyable and educational project. I was baffled though at the end because I could see in the console log that the array of businesses was coming in from Yelp, but they weren’t displaying in the results on the page.

I compared the solution Business component,

class Business extends React.Component {
  render() {
    return (
      <div className="Business">
        <div className="image-container">
          <img src={this.props.business.imageSrc} alt=''/>
        </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.toUpperCase()}</h3>
            <h3 className="rating">{`${this.props.business.rating} stars`}</h3>
            <p>{`${this.props.business.reviewCount} reviews`}</p>
          </div>
        </div>
      </div>
    );
  }
}

…to mine,

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

It all worked perfectly once I substituted the code. But I can’t tell where in the project the differences above were implemented. Does anyone know?

The solution code in fact was like that in the solution to Ravenous 2, but when I checked Ravenous 2 I couldn’t see any instructions to make these changes.

Thanks for any ideas about this.

#2

Most of the changes were supposed to be made in Ravenous Part 2 - Task #9

(snippet of a portion of Task #9)

Open Business.js . What do you notice about how information is accessed inside of the return statement?

Because the business object was removed, statements like the following no longer have any meaning:

{business.imageSrc}

Business information now has to be accessed via the business prop you set in BusinessList.js . Modify all statements (like the one in the example above) by prepending them with this.props .

In the example they provided, they said to prepend this.props to each of them, but it looks like you removed business in the process of doing that.

Also, you still had the hard-coded “pizza.jpg” image rather than the imageSrc

1 Like
#3

Hi, thanks a lot for this.