Props

React components are just functions and functions are meant to be reusable. Part of that reusability is being able to accept arguments.

Now consider that our application will have data and parts of the data will need to rendered in the UI. Doing so means passing the Components the data they need and then performing whatever action is needed to render all or parts of the data in the UI.

The data we pass to Components are called props. Every Component has it and they are how we pass data from a parent to a child Component.

Consider a pet adoption app that needs to show a list of pets along with their names and photos.

Each pet will need to display its own name and image so the <AdoptionListing> component needs to be passed arguments. That's where props come in.

Props are passed to components as attributes just like in HTML elements:

<AdoptionListing name="Mittens" imageURL="http://placekitten.com/200/150" />
<AdoptionListing name="Bobo" imageURL="http://placekitten.com/201/150" />
<AdoptionListing name="Mickey" imageURL="http://placekitten.com/202/150" />

Props added to the components are passed in as a JavaScript object (we name it props by convention).

const AdoptionListing = (props) => {
  return (
    <div>
      <h3>{props.name}</h3>
      <img src="{props.imageURL}" alt="Kitten" />
      <p>Kitten - available for adoption</p>
    </div>
  );
};

You'll commonly see props being destructured like so:

const AdoptionListing = ({ name, imageURL }) => {
  return (
    <div>
      <h3>{name}</h3>
      <img src="{imageURL}" alt="Kitten" />
      <p>Kitten - available for adoption</p>
    </div>
  );
};