Ravenous part 2 "this.props" vs "const {business} = this.props"

I’m not sure why the second example shows up as undefined for all the values but the first example shows up fine with the const {business} = this.props whats cause the second example to not load the values.

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

export default Business;
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.imageSrc} 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.state} ${this.props.zipCode}`}</p>
                    </div>
                    <div className="Business-reviews">
                         <h3>{this.props.category}</h3>
                         <h3 className="rating">{this.props.rating}</h3>
                         <p>{`${this.props.reviewCount} reviews`}</p>
                    </div>
                </div>
            </div>
        );
    }
}

export default Business;

this.props is an object. In that object there is expected to be a property called business. The first example is extracting the value of the property business in this.props. So it is the same as this.props.buisness.

The second example is looking for all the things that are on this.props.buisness but on this.props.