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.

Hi! so baically, since we put business through curly braces in the definition of the const, it means that business is a property of props, am i right?
so, if we wrote
const business = this.props.business
it would be ok am i right? while writing

const {business} = this.props.business is wrong as {business} would then be equal to this.props.business.business

Is my thinking procedure ok?