1. Code
  2. JavaScript
  3. React

Learn React 18: Passing Data With Props

Scroll to top
60+ min read

In React, we primarily use props to pass data to our components. 

In this lesson from our free full-length beginner course on React 18, you'll learn how. 

Working with software means that you will have to deal with data. You will take some input data, do some processing, and then optionally output the final result.

In React, we primarily use props to pass data to our components. The word props is basically a shorter term for properties. You have seen them in action in the last few tutorials, where we created components to display information about countries.

In this tutorial, we will focus on learning about props in more detail. This tutorial will simply cover the basics, and then we will move to more advanced topics later in the series.

Props Are Like Attributes

The easiest way to understand props is to think of them like the attributes that you can pass to HTML elements in web development. However, props are much more advanced.

Any prop will have two elements. The first is the prop name, which is simply the attribute name. The second is the prop value, which is the value of that attribute. You can assign as many props to your component as you like.

There are two rules that you have to follow when assigning a name to different props.

  1. The prop name cannot be a reserved keyword from JavaScript. This is because the JSX we write will ultimately be converted to JavaScript, and using reserved keywords will mess things up. This is why we use className instead of class and htmlFor instead of for as the prop names.
  2. The prop names should be in camelCase.

As I said earlier, you can pass as many props to a component as you like. However, a component is not required to use all the props.

You can think of passing props to components as passing parameters to functions. Components are like functions in that sense, and just as you can pass any kind of value as a parameter to functions, you can pass any kind of value as a prop.

1
/* let countryElement = (

2
  <Country

3
    name="United States"

4
    capital="Washington, D.C."

5
    population="332 million"

6
  />

7
); */
8
9
let countryElement = Country({name: "United States", capital: "Washington D.C.", population: "332 million"});
10
11
let rootElement = document.getElementById("root");
12
ReactDOM.createRoot(rootElement).render(countryElement);

In the above example, we replaced the JSX for our Country component with a function call to Country and stored the result inside countryElement. However, rendering out countryElement in the end gave us the same result.

Props Must Be Read-Only

A component is not supposed to modify the value of its props. The functions or classes that we define to create our component must keep the props as read-only. This behavior is enforced when you create a React app by running the command:

1
npx create-react-app your-app

In such cases, the following code will give you an error about name being read-only.

1
function Country(props) {
2
3
    props.name = "Australia";
4
5
    return (
6
      <div className="container">
7
        <h2 className="country-name">Country Name: {props.name}</h2>

8
        <p className="population">Population: {props.population}</p>

9
        <p className="area">Area: {props.area} km<sup>2</sup></p>
10
      </div>

11
    );
12
}
13
14
export default Country;

Props must be immutable because components are supposed to use them to get information from their parents. If you actually want to modify some information in a component, using state is your best bet. State is basically data that is maintained within the component, and React will automatically update the DOM based on any changes in state. We will learn more about that later in the series.

Keep in mind that data in React flows from parent to child and so on further down the list.

Final Thoughts

I hope you now have a basic understanding of props in React. In later tutorials, we will discuss how to validate props and provide default values for them.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.