Ravenous Project - Please explain the concept, I am so confused

I got this right through the Video but I dont understand the concept behind this at all. Can someone please explain?

  1. So App.js pass a props businesses={businesses} to BusinessList.js.
  2. In BusinessList.js, we map the props `businesses={businesses}
{
          this.props.businesses.map((business) => {
          return <Business business={business} />;
        })
  1. and make each component equal to
    which is passing the props from BusinessList.js to Business.js

Step 3 is what I dont understand. There are 3 “business”. First Business is indicate the destination as Business.js. But what is business={business} ?

Business.js

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



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.toUpperCase()}</h3>
            <h3 className="rating">{`${business.rating} stars`}</h3>
            <p>{`${business.reviewCount} reviews`}</p>
          </div>
        </div>
      </div>
    );
  }
}

export default Business;

business={business} is passing only one element of the this.props.businesses array to the <Business /> component on the prop named business. That way when the component processes, it will only know about that one element it’s responsible for, and it will access it using this.props.business since that happened to be the name of the attribute used.

The names being the same even when they don’t need to be can be a little confusing when you’re learning, but the consistency will help keep code readable as you get used to the flow of things.

Reading Optional: Here’s a long breakdown with how alternate names for some parts would work if the above wasn’t clear:

App.js defines and maintains an array in its state called businesses (this is how it is now too). It can be accessed using this.state.businesses and updated with calls to this.setState() like it does in the searchYelp() function in that module.

Currently, the entire businesses array in state is sent to the BusinessList component using <BusinessList businesses={this.state.businesses} /> from App.js, which means that BusinessList would be able to access the entire array from this.props.businesses in the BusinessList.js file.

We could have just as easily passed the this.state.businesses array to BusinessList on another property, such as theBusinessArray by doing the following: <BusinessList theBusinessArray={this.state.businesses} />, then the BusinessList component would access the array using this.props.theBusinessArray instead.

In the BusinessList component, it uses map() on the array it is passed to create a <Business /> component for each element of the array. Each Business component created will only be responsible for that particular element of the array, so only that one element is passed to it If we passed the array on the alternate prop name of theBusinessArray, then that mapping could look like this:

this.props.theBusinessArray.map((arrayElement) => {
  return <Business business={arrayElement} />;
}

Notice that to further illustrate how all these names being the same or similar was just by convention and/or readability, I used arrayElement as the parameter of the arrow function. In this code, we are passing the element of the array to the <Business /> component on the business property, so it would be accessed by this.props.business from there, but we could have named it something different here as well.

1 Like