Guide to Using Props for Beginners

6 min readDec 3, 2023

React is one of the popular JavaScript libraries that gives developers flexibility to build User Interfaces (UI). And there are many reasons and advantages for why React is a popular library. One of the fundamental concepts of React is the ability of props to pass data among the components. In this site, we will focus on the concepts of props.

Before you read, understand how components are created, how they return JSX templates, and how multiple components can be inside a component’s return statement. Otherwise, you can proceed to learn about props.

What are props?

Props, short for properties, is a concept of reusability for a parent component to pass information to a child component. Parent components and their child components can be on common ground to share information, communicate, and understand each other, all because of the use of props. In other words, a child component wouldn’t know there is information or data it can read from its parent component, so props are necessary. Props can have diverse data types, including strings, numbers, arrays, functions, and objects. We will learn how to work with props.

How do we pass down props to the child component?

We can pass down as many props as we need into a component. So, let’s show how a parent component can pass down props and how a child component can receive and read them.

Prepare Components

Here are two components without props. Remember that a top-level component, in this case, would be App, which is a parent component, would need to add another component, ChildComponent, inside its return component.

//A App.js file

import React from "react";
import App from "./ChildComponent";

function App() {
  return (
    <div>
      <h1>This is the parent component </h1>
      <ChildComponent />
    </div>
  );
}

export default App;

//A ChildComponent.js file

import React from "react";

function ChildComponent() {
  return (
    <div>
      <h1>This is the child component</h1>
    </div>
  );
}

export default ChildComponent;

App

The first thing is to pass down props, so let’s pass down the props of firstName, lastName, and age. Those are the three props that we will pass to the ChildComponent.

import React from "react";
import ChildComponent from "./ChildComponent";

function App() {
  return (
    <div>
      <h1>Introduction</h1>
      <ChildComponent firstName="Bobby" lastName="Smith" age={45} />
    </div>
  );
}

export default App;

firstName and lastName props are strings that require quotations, whether in single or double quotation marks. Age is a number that doesn’t use quotations but needs to be in curly brackets. The syntax would remind you of writing an attribute name equal to an attribute value for an HTML tag.

<button id="submit"></button>

It is the same for props where whatever name props equal whatever value props.

ChildComponent

import React from "react";

function ChildComponent(props) {
  return (
    <div>
      <p>
        My name is {props.firstName} {props.lastName}. I am {props.age} years 
        old.
      </p>
    </div>
  );
}

export default ChildComponent;

The ChildComponent has received the props where it can access a parameter inside the function called ‘props.’ Inside the return statement, we can see the syntax of props.<whatever name> is inside the bracket since this is JSX.

Output in the browser:

Here, we can see that the App passes down the data of firstName props, lastName props, and age props to the ChildComponent, which can receive and read the firstName value, lastName value, and age value. Hence, there are advantages to reusing information (component reusability) and data flow (from the parent component to its child component).

Here is another way in which we can go ahead and declare variables instead in the ChildComponent file:

import React from "react";

function ChildComponent(props) {
  const firstName = props.firstName;
  const lastName = props.lastName;
  const age = props.age;

  return (
    <div>
      <p>
        My name is {firstName} {lastName}. I am {age} years old.
      </p>
    </div>
  );
}

export default ChildComponent;

Both the first and second ChildComponent codes do the same thing. You can use let if not const.

Using Console in the ChildComponent File

import React from "react";

function ChildComponent(props) {
//Here is console before return statement
  console.log(props);
  return (
    <div>
      <p>
        My name is {props.firstName} {props.lastName}. I am {props.age}
        years old.
      </p>
    </div>
  );
}

export default ChildComponent;

Output in the console window:

Destructuring to Access Props

Although we can use the props in the parameter in child components, luckily, there is an easier way to destructure the props directly. We have access to the feature of modern JavaScript (introduced in ES6) called destructuring, which can make codes cleaner and more readable. The way to directly destructure from the props is by stating what properties we want from there in the parameter and without needing to write down props.<whatever name>. Here is the way to do with destructuring the props:

//A ChildComponent.js file

import React from "react";

function ChildComponent({ firstName, lastName, age }) {
  return (
    <div>
      <p>
        My name is {firstName} {lastName}. I am {age} years old.
      </p>
    </div>
  );
}

export default ChildComponent;

Destructuring props is creating variables with the same name, which are in curly brackets in the parameter of a function.

Look at this code again without using destructuring. Imagine if you were to write more extended codes. So, it is understandable why destructuring is preferred to make codes more concise.

//Without destructuring

import React from "react";

function ChildComponent(props) {
  return (
    <div>
      <p>
        My name is {props.firstName} {props.lastName}. I am {props.age} years 
        old.
      </p>
    </div>
  );
}

export default ChildComponent;

Default Value to Destructured Props

Another advantage of destructured props is that the props passed from the parent component are supposedly absent, or the value is undefined. Or, supposedly, the URL passed from the parent component was unreliable. The good news is that we can use a default value to assign any expression to destructured props like a placeholder.

Here, the App doesn’t have age props, and we assign a number to age props in the ChildComponent:

//A App.js file

import React from "react";
import ChildComponent from "./ChildComponent";

function App() {
  return (
    <div>
      <h1>Introduction</h1>
      <ChildComponent firstName="Bobby" lastName="Smith" />
    </div>
  );
}

export default App;

//A ChildComponent.js file

import React from "react";

function ChildComponent({ firstName, lastName, age = 25 }) {
  return (
    <div>
      <p>
        My name is {firstName} {lastName}. I am {age} years old.
      </p>
    </div>
  );
}

export default ChildComponent;

Output to the browser:

If the App has age props, it will overwrite the default value of age props in the ChildComponent since the default value expression is like a placeholder. The output for age would be 45 instead of 25.

Children Props

Children props are special props that pass the information we want to add from the parent components to the children components. However, the data is in the parent’s opening and closing tag. Here is an example:

//A App.js file

import React from "react";
import App from "./ChildComponent";

function App() {
  return (
    <div>
      <ChildComponent>
        <h1>Introduction</h1>
        <p>My name is Bobby Smith. I am 45 years old.</p>
        <p>I am using children props which is a special prop.</p>
        <img src="https://react.dev/images/og-home.png" alt="React Logo" />
      </ChildComponent>
    </div>
  );
}

export default App;

//A ChildComponent.js file

import React from "react";

function ChildComponent(props) {
  return (
    <div>
      <p>{props.children}</p>
    </div>
  );
}

export default ChildComponent;