Learn Reaction 18: Pass Data With Props

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

At React, we primarily use props to transmit data to our components. The word props it is basically a shorter term used for properties. You’ve seen them in action in the last few tutorials where we’ve created components to display country information.

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

Props are like attributes

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

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

There are two rules you need to follow when naming different props.

1. The name prop cannot be a keyword reserved by JavaScript. This is because the JSX we write will eventually be converted to JavaScript and using reserved keywords will ruin things. This is why we use className instead of class And htmlFor instead of for as a scene name.
2. The names of the props should be in camelCase.

As I said earlier, you can pass as many props as you want to a component. However, you don’t need a component to use all of the props.

You can think of passing props to components like passing parameters to functions. Components are like functions in this sense and just like you can pass any type of value as a parameter to functions, you can pass any type 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 example above, we have replaced JSX with our own Country component with a function call a Country and stored the result inside countryElement. However, the rendering countryElement in the end it gave us the same result.

Props must be read-only

A component shouldn’t change the value of its props. The functions or classes we define to create our component must keep the props read-only. This behavior is applied 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 the read-only “name”.

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 need to be immutable is because components are supposed to use them to get information from their parents. If you actually want to change some information in a component, using status is your best bet. State is basically the data that is kept inside the component and React will automatically update the DOM based on any state changes. We will know more later in the series.

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

Final thoughts

Hope you now have a basic understanding of props in React. In later tutorials, we will discuss how to validate props or provide them with default values.