Introduction to React Props & How to Use It in Your Code

React is a programming language used to quickly and efficiently create robust applications and software. React props are a singular aspect of React used to help simplify the passing of data from one component to another. However, it is not the act of giving props to one of your friends, that is very different. Instead, it's how an application shares data across different parts of a piece of software.

In this post, you will learn about React props, what they are and how you can use them in your code to create efficient software. You will also learn the syntax of props and see some code examples of React props in action.

• How To Use Props In React
• React Props Example
• Getting Started Using React Props

Let’s jump right in.

What are React props?

In React, the term props stands for properties, which refers to the properties of an object. This is because all elements created in React are JavaScript objects. As a result, passing data into a component is done by creating properties and values for the object.

Understanding how to use props in React can be a little confusing at first due to the unique way it behaves. React props are read-only, that is to say, once the data has been passed to its component, it cannot be changed.

It may sound like that creates a serious limitation to the use of props in your React code. But it really isn’t, in fact, it adds a layer of protection to both security and performance. Props work through passing data into a component to be used, typically for UI needs.

Check out the following video to learn more about how props works.

How to Use Props in React

Not all components will use props, that is reserved for components with data to display. The benefit of this is that it creates a more efficient user experience with code that executes quickly. 

React props can be thought of as rain falling on layers of soil, typically the flow is down, not up. Because of this, the element that uses the props value is generally the child of the component that contains it. In React props are used primarily to display data that does not change, to render data that needs regular updating you’ll need state.

This can sound a little confusing, so let’s look at some code examples to illuminate this process.

React Props Example

In React you can create JSX React elements that represent HTML DOM tags, but there is more you can do with the JSX. JSX can also be used to create user-defined components, that is, components defined with user data. This is where props get powerful, with this concept you can create dynamic components for displaying user data.

Now that you’ve learned about its theory, let’s dive into some code examples of how this works.

 
function Introduction(props) {
  return <h1>Hello, I’m {props.name}!</h1>;
}

This bit of code creates a simple component that accepts props as an argument, inside is a single H1 tag. Within that H1 tag is a single props object called name, at this point though the name prop has not been defined yet. Let's look at how to do that next.

 
const element = <Introduction name="The Doctor" />;

The above line of code instantiates the component called Introduction, and the attribute within it is the name prop and its value we are passing into the component. With both of these code bits, you have a component, an H1 tag, and a props object. But this isn’t dynamic just yet, currently, the data being passed is a static string. 

To make this dynamic you will need a variable, which can hold a dynamic value from a database or user input. The syntax for this is just as you might expect, a variable wrapped in curly brackets, which replaces the static string value.

 
const element = <Introduction name={userInput} />;

With these pieces in place, you have a very dynamic component ready to accept input from a user and display information. Now say you were creating an social app, and in that application you wanted show users to each other or even greet eveyrone.

You could create an array and add users to it, then loop through that array, and pass array items to the component. Let’s look at what that process looks like below.

 
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
let users = ["The Doctor","Daleks","Cybermen"];
function App() {
let user=users.map((item,index)=>{
  return <Welcome key={index} name={item}/>
})
  return (
    <div>
      {user}
    </div>
  );
}

Now you’ve seen how to pass a single props value and how to pass in collections of values into a component for use. It’s important to remember, when passing in a collection of values, each item in a set will need it’s own key attribute.

Getting Started Using React Props

You’ve learned alot about props and how to use them in your React code. You’ve also discovered the syntax of props declaration, and use them in your components. You’ve also learned how to work with a collection of values and pass them into a React component. Moving forward a great way to build on this knowledge is to practice using props to create different affects. After that you could step into learning how to use props with component state in order to create components that support changing data.