Learn React 18: Passing Data With Props

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 used for properties. You have seen them in action in 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 during 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 prop name.
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 like you can pass any kind of value as parameter to functions, you can pass any kind of value as a prop.

/* let countryElement = (
  <Country
    name="United States"
    capital="Washington, D.C."
    population="332 million"
  />
); */

let countryElement = Country({name: "United States", capital: "Washington D.C.", population: "332 million"});

let rootElement = document.getElementById("root");
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:

npx create-react-app your-app

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

function Country(props) {

    props.name = "Australia";

    return (
      <div className="container">
        <h2 className="country-name">Country Name: {props.name}</h2>
        <p className="population">Population: {props.population}</p>
        <p className="area">Area: {props.area} km<sup>2</sup></p>
      </div>
    );
}

export default Country;

The reason props must be immutable is 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 or provide default values for them.