What is "Props" and how to use "Props" in Components ?

What is "Props" and how to use "Props" in Components ?

One amazing feature about React is that, being a component based library, it allows you to separate your app into smaller sections. This separation or break-down of the app into smaller blocks is achieved using components.

If you are unfamiliar with components, you can read my post on it here

In this post I take you through props. What it is , and how to use it.

What is Props?

Before we dive into props, let recap what components are. Remember that, components are just blue prints or templates that indicate how a particular section of the web app should look like. The true power of a component is the data or information you give it. When components accepts data, the components become dynamic.

Props is that way of passing data or information to the component to make it dynamic.

In React , props stand for (properties). Props can be defined as single values or object which contains a set of key-values that are passed to components using a syntax similar to HTML attributes

How is data passed in components ?

The way we pass data in components so it displays something dynamic is by the use of HTML-like attributes.

In HTML, attributes are special words use inside the opening tag to control element's behavior. In the example below, href represents the attribute, and "google.com" is the value of the attribute

<a href="http://google.com">Google </a>

You, can pass data to React components using a similar syntax as above. The format will be as below

< ComponentName attributeName ="value" />

Further understanding Props

Let's say we have a component called

<WelcomeUser />

that renders: Hello Emma or Hello John etc. Thus, the component will need to display, Hello and then the user's name . Props will help us render that information dynamically depending on the data we pass to it

Starting with a basic hard-coded version of the component, let see how props can help in displaying dynamic content.

//WelcomeUser.js
import React from "react"

export default function WelcomeUser(){
   return <div> Hello User </div>
}

The

<WelcomeUser />

will now display Hello User, on render.

Now let's see how we can use props to display a dynamic user name. So it renders something like : Hello Sam or Hello David

How To Use Props in Components

The following steps will help you use props in your components

  • First, define an attribute and set its value

  • Pass the attribute to the component

  • The Component accepts the attribute as props

  • Render the props data

Defining an attribute and setting its value

Just like we can assign attributes and values in HTML tags, we can do same in React Components.

<WelcomeUser  user ="Emma" />

The user="Emma" now represents an attribute user with value equal to Emma that we have added to our WelcomeUser component. Now instead of rendering

<WelcomeUser /> we can render <WelcomeUser user="Emma" />

Doing this, our component is said to have received props . We can now read user="Emma" as an object

{user: "Emma"}

The syntax for adding attributes to React components then becomes

<Component  someAttribute="someValue"  anotherAttribute ="anotherValue"/>

Passing Data Using Props

Now that the component has a property with corresponding value(s), we can now pass the data or information as props into the file our component was created.

How do we do that ?

Just like we will pass arguments to a function , we will pass pass props to React components .

Passing arguments to functions

function createFunction(arg){
  return  Hello arg
}

Passing Props to React Components

We can pass props to the component as below.

function WelcomeUser(props){
// do something with the props ( object ) received 

}

Rendering the Props data

Recapping what we have done so far

  • We initially created a props and passed the props to our component

  • The component then received the props

  • The last thing to do is display the props received in their component.

Note that the props received is an object , so we can access its value using the dot notation ( object.key). So to access the value of the props we passed to our component we will do this

{ props.user }

Note that, user is name of our attribute . To access the value of any props , you simply write props.attributeName in curly braces. Where attributeName is whatever name you gave to your attribute

Using our component, we can now render the user data using props like below

import React from "react"
function WelcomeUser(props){
     return <div> Hello {props.user } </div>
}

This will display

Hello Emma

To Conclude

In this example, we only passed a string as the attribute's value but note that the value of the attribute can also be a JavaScript object.

<WelcomeUser  user = {data} />

You will then use your knowledge in data structures to access the needed information.

In summary, props is a way to pass data or information to our component to render something dynamic. The props can be just like we do with HTML attributes. The component then accepts the props and renders the corresponding data.

Was it a good read, do you want to touch it up a little? Feel free to drop your comment