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.
-
- 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 ofclass
andhtmlFor
instead offor
as prop name.
- 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
-
- 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.