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.
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.
foras prop name.
- 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.
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.