Blog_Banner_Asset
    Homebreadcumb forward arrow iconBlogbreadcumb forward arrow iconFull Stack Developmentbreadcumb forward arrow iconA Beginner’s Guide React Props [With Syntax]

A Beginner’s Guide React Props [With Syntax]

Last updated:
16th Sep, 2020
Views
Read Time
7 Mins
share image icon
In this article
Chevron in toc
View All
A Beginner’s Guide React Props [With Syntax]

React is an MIT-licensed open-source JavaScript library that is used for designing interactive UI for applications. It is a component-based declarative, flexible, and efficient library, making the lives of developers easier. Since it is a component-based library, it divides UI into several individual pieces known as components. These components need to communicate with each other to function appropriately, and that’s when the React props come into the picture.

Check out our free courses to get an edge over the competition. 

What are React Props?

The word “Props” is a keyword in the React library that means properties. They are also sometimes referred to as a global variable or object in React components. React props are similar to arguments in HTML. Some things worth noting about React props are that they always flow in uni-direction, and the data within them are read-only. This makes them immutable, meaning the data flowing from one component cannot be changed in the other. We can understand this with an example of a pure and impure function.

Check out upGrad’s Advanced Certification in DevOps 

Ads of upGrad blog

This is a pure function as it will always give the same output for the same inputs:

function prod(a, b) {

return a * b;

}

This is an impure function as it is manipulating its own input:

function deposit(account, amount){

account.total += amount;

}

Since React props are immutable, the components need to operate as pure functions. That’s the only strict rule in the flexible React library.

Explore our Popular Software Engineering Courses

The Syntax for Passing and Accessing React Props

As mentioned earlier, React props are similar to HTML arguments, and hence to pass or add any props to a component, we can do it similar to passing HTML attributes.

Syntax:

<component_name props_name = “value” />

In the above syntax, ‘component_name’ is the name of the component to which we need to pass props, props_name is the props’ name, and value is the props value.

We can access any props from within the component’s class.

Check out upGrad’s Full Stack Development Bootcamp (JS/MERN)

Syntax:

this.props.props_name;

In the above syntax, this.props is a global object that is used to access any props from within the component’s class, and the props_name is the name of the React props that we want to access.

Read: JavaScript vs JQuery: Difference Between JavaScript and JQuery

Explore Our Software Development Free Courses

How to Use React Props?

There are two different ways to use immutable React props data in any component. These two ways are by adding props to the reactDom.render() function in the main file or by adding data as default props in the component itself. Here’s how to use React props in both the ways:

Using React Props From react.Dom.render() Function

First we need to add props in the component file.

import React from ‘react’; //importing the React library

class Example extends React.component { /* example is the component name which is extending React component class’ properties */

render() {

return (

<div>

<h2>{this.props.firstProp} in h2</h2>

<h3>{this,props.secondProp} in h3</h3>

</div>

);

}

}

export default Example; //exporting the component

Now we need to add value to props via reactDom.render() function in the main file and access it from there.

import React from ‘react’;

import ReactDom from ‘react-dom’;

import Example from ‘./Example.jsx’;

ReactDom.render(<Example firstProp = “This is the firstProp” secondProp = “This is the secondProp”/>, document.getElementById(‘example’));

export default Example;

Results:

This is the firstProp in h2

This is the secondProp in h3

In-Demand Software Development Skills

Using React Props With Default Props in Component Constructor

Add props and their values in the component file.

import React from ‘react’; //importing the React library

class Example extends React.component { /* example is the component name which is extending React component class’ properties */

render() {

return (

<div>

<h2>{this.props.firstProp}</h2>

<h3>{this,props.secondProp}</h3>

</div>

);

}

}

Example.deafultProps = {

firstProp: “This is the firstProp”,

secondProp: “This is the secondProp

}

export default Example; //exporting the component

Accessing the React props from the main file.

import React from ‘react’;

import ReactDom from ‘react-dom’;

import Example from ‘./Example.jsx’;

ReactDom.render(<Example/>, document.getElementById(‘example’));

The outputs for this will be similar to reactDom.render() function usage, except that this time it is done with the help of default props.

Check out: Vue vs React: Difference Between Vue and React

Read our Popular Articles related to Software Development

How to Pass React Props From One Component to Another

The major use of React props is to pass data between components in React. The following example will help us understand how data is passed.

import React from ‘react’;

class Fruit extends React.Component {

render() {

return <h4>I am {this.props.name} in h4</h4>

}

}

class Question extends React.Component {

render() {

return (

<div>

<h3>Which Fruit are you? In h3</h3>

<Fruit name = “Mango” /> //Creating props and assigning a value

</div>

);

}

}

ReactDom.render(<Question />, document.getElementById(‘fruit’));

This will give the following output:

Which Fruit are you? In h3

I am Mango in h4

Using State and Props Together

As we all know that React is a dynamic language, and its flexibility is it’s USP. Hence, using React props all alone is not enough in developing applications. This issue is solved with the help of the state. The state is another React feature that is used for managing data. Let’s see how we can combine React props and state to make our application more interactive and dynamic.

import React from ‘react’;

class Car extends React.Component {

constructor(props) {

super(props);

this.state = {

firstCar: “This is a Mercedes-Benz! In h2”, //assigning value to state

secondCar: “This is a BMW! In h3” //assigning value to state

}

}

render() {

return (

<div>

<FirstCar firstProp = {this.state.firstCar}/> //assigning value to props

<SecondCar secondProp = {this.state.secondCar}/> //assigning value to props

</div>

);

}

}

class FirstCar extends React.Component {

render() {

return (

<div>

<h2>{this.props.firstProp}</h2>

</div>

);

}

}

class SecondCar extends React.Component {

render() {

return (

<div>

<h3>{this.props.secondProp}</h3>

</div>

);

}

}

export default Car;

Now, we need to access data from the main file.

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import Car from ‘./Car.jsx’;

ReactDOM.render(<Car />, document.getElementById(‘car’));

The result:

This is a Mercedes-Benz! In h2

This is a BMW! In h3

Also Read: Difference Between Node JS and React JS

Summing it up

Ads of upGrad blog

The combination of both React props and the state for managing data in the React makes it one of the most useful JavaScript libraries. There are tons of React project ideas out there, and only the developers can give life to them. Therefore, there is an excellent demand for ReactJS developers and an increase in their salary.

If the idea of helping businesses to create applications and working on numerous React projects to get a huge income excites you, then it is time to take action before it gets too late. You can take online courses offered by upGrad to learn everything about React and become a full-stack software developer.

If you’re interested to learn more about react, full-stack development, check out upGrad & IIIT-B’s PG Diploma in Full-stack Software Development which is designed for working professionals and offers 500+ hours of rigorous training, 9+ projects, and assignments, IIIT-B Alumni status, practical hands-on capstone projects & job assistance with top firms.

Profile

Rohan Vats

Blog Author
Software Engineering Manager @ upGrad. Passionate about building large scale web apps with delightful experiences. In pursuit of transforming engineers into leaders.

Frequently Asked Questions (FAQs)

1What is the difference between an app developer and a full-stack developer?

2How can I use PHP for app development?

PHP is a flexible programming language that can be applied to a wide range of app development projects. It features a straightforward syntax that makes it simple to pick up, and it can be used for both back-end and front-end development. A number of PHP frameworks are also available, which can make development easier and faster. It may also be used to create mobile apps utilizing the PhoneGap framework, which is built on PHP. Finally, PHP is a widely used web development language, with a variety of frameworks and tools for building dynamic and responsive websites.

3What is Angular?

Angular is a mobile and desktop web application development framework. It's a TypeScript-based JavaScript framework. Google and the Angular team are in charge of its upkeep. YouTube for Mobile, Google AdWords, and the Google I/O app have all been developed using this. In the same way, Angular can be used to build desktop applications.

Explore Free Courses

Suggested Blogs

8 Exciting Full Stack Coding Project Ideas &amp; Topics For Beginners
4394
A Full stack developer is an engineer who can design and develop an end-to-end application independently by handling all the work of coding, databases
Read More

by upGrad

19 Feb 2024

17 Interesting HTML Project Ideas &#038; Topics For Beginners [2024]
415959
Summary In this article, you will learn 10 Interesting HTML Project Topics. Take a glimpse below. A tribute page A survey form Technical documentati
Read More

by Rohan Vats

19 Feb 2024

How to Open json File in Excel
96687
What is JSON? JSON (JavaScript Object Notation) is a file format that is used for storing and exchanging data in the network. It is used to send data
Read More

by Rohan Vats

19 Feb 2024

JSP vs Servlet: Difference Between JSP &#038; Servlet [2024]
52684
Websites are collections of static files, for example, images, graphics, and HTML files. These websites are referred to as web applications if they pr
Read More

by Rohan Vats

19 Feb 2024

Java Developer Salary in India in 2024 [For Freshers &#038; Experienced]
900639
Wondering what is the range of Java developer salary in India? From choosing your first programming language to writing apps for Android and several
Read More

by Rohan Vats

19 Feb 2024

Polymorphism In OOPS: What is Polymorphism [Detailed Explanation]
124652
Polymorphism in OOPs is inseparable and an essential concept of every object-oriented programming language. An object or reference basically can take
Read More

by Rohan Vats

19 Feb 2024

Literals In Java: Types of Literals in Java [With Examples]
8234
Summary: In this article, you will learn about Literals in Java. Literals in Java Integral Literals Floating-Point Literals Char Literals String Lit
Read More

by Rohan Vats

19 Feb 2024

Top 30 Exception Handling Interview Questions and Answers [For Freshers &amp; Experienced]
35915
Exception handling is a concept that is implemented in algorithms to handle possible runtime errors, which may disrupt the normal flow of a program. S
Read More

by Rohan Vats

19 Feb 2024

Top 40 MySQL Interview Questions &#038; Answers For Beginners &#038; Experienced [2024]
130386
Have a Data engineering or data science interview coming up? Need to practice some of the most asked MySQL interview questions? The article compiles t
Read More

by Rohan Vats

19 Feb 2024

Schedule 1:1 free counsellingTalk to Career Expert
icon
footer sticky close icon