React Props: The Bare Basics

React Components:

One of the key and notable features of React is components. React allows developers to build reusable components of an application that can then be rendered together. In practical terms, components allow a building block style of building applications:

• Components, as a best practice, are built with discrete functionality and purpose

• Components can be reused, either in other parts of the code, or for different applications altogether
  If implemented well, discrete functionalities for components allows for easier understanding of the individual parts of the application and management of the code base

While the components may be rendered together, components must also be able to share information and pass values to one another. This is a job for Props.

Props:

Props play an important role in passing values between the components.

While React components are effectively separate pieces of functional code, when they are used in combination to support an application, those components must be able to share values (or arguments) with each other! Props allow for this transmission of values from one component to another. However, it is important to remember that information through Props allows for passing values from a parent component down to a child component. That is to say, Props sharing is unidirectional. Props can be passed from child to parent, but that is accomplished through function calls, and the function arguments are what the parent component receives. That is a subject for another blog post, and this blog post spotlights parent to child props passing.

Props Overview:

Some key syntactical concepts to grok:

Props are passed to components via HTML attributes, so we write the props we want to send down to child components in the same syntax as an HTML attribute.

Props values can be an object, integer, string, boolean, array and even a function!

Example:

For the purposes of illustration, let's use the following example: We have an application whose parent component needs to pass down props, a name as string object, to a child component.

function ParentComponent() {
return (
<ChildComp name="Jake"/> //the prop called "name" is written as we would an attribute for an HTML tag and given the value "Jake"
)
}

Now we can access the props in the Child component:

function ChildComponent(props) {
//now we can access the prop!
return(
<div>
"Hi {props.name}!" {/* Note how to access the 'Props' is accessed as you would a key-value pair! */}
</div>
);
}

Accessing multiple props

But what if we have multiple props? You can use the same convention of writing props (as you would write HTML attributes) as you saw in the previous example for each additional prop you want to specify. To access those props, just as you would access an object with multiple key-value pairs, you would access the props using dot notation in the child component.

function ParentComp() {
return (
<ChildComp name="Jake" hometown="Boise"/>
)
}

function ChildComp(props) {
return(
<div>
"Hi {props.name}!" {/* To access the 'name' we use dot notation to access the name value */}
"Are you from {props.hometown}?" {/* the same format is used to access the 'hometown' value */}
</div>
);
}

Prop Destructuring:

In the previous examples, we passed simple values (as strings) to our child component using props. In real world applications, this may or may not be the case. You could have a child component that needs to take in simple constant value.

However, React’s usefulness and power comes in the ability for parent components (by way of the developer, of course) to pass down just the information that a child component needs.

Let’s take for example a application that displays the images of paintings, and an image’s complete object record looks something like this:

{
"objectID": 436532,
"isHighlight": true,
"primaryImage": "https://images.metmuseum.org/CRDImages/ep/original/DT1502_cropped2.jpg",
"primaryImageSmall": "https://images.metmuseum.org/CRDImages/ep/web-large/DT1502_cropped2.jpg",
"department": "European Paintings",
"objectName": "Painting",
"title": "Self-Portrait with a Straw Hat (obverse: The Potato Peeler)",
"artistDisplayName": "Vincent van Gogh",
"artistDisplayBio": "Dutch, Zundert 1853–1890 Auvers-sur-Oise",
"artistNationality": "Dutch",
"artistBeginDate": "1853",
"artistEndDate": "1890",
"objectDate": "1887"
"medium": "Oil on canvas",
"dimensions": "16 x 12 1/2 in. (40.6 x 31.8 cm)",
}

While the parent component may contain the entirety of the painting’s object data as shown above, a child component responsible for rendering the image and the image’s title may not need all of the object data.

Cue props destructuring.

To render the image onto the DOM, the child prop may only need the title of the painting and the image url. Instead of passing the entire object value down to the child component, you can destructure your prop and send only the information the child component needs.

function ParentComp() {
   return (
       <ChildComp imageUrl={paintingObj.primaryImage}  imageTitle={prop.title}/>
   )
}

function ChildComp(imageUrl, imageTitle) {
   //compare to the previous example, where we pass down "Props"
   //here we have explicitly called out the prop key from the parent component

   return(
       <div>
           <h1>{imageTitle}</h1>
           <img class="img" src={imgObj.primaryImage}/>
       </div>
   )
}

And we’d expect to see this:

(You can also read more about Props here )

Happy Coding!