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 

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.

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.

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

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

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

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.