How to use Props in ReactJS

By lmartinez, 30 December, 2021
react
Unsplash

 

In React, Props refer to properties that play an important role in the development process of an application or web page. Components are the building blocks of React and these components use Props to enhance their functionality and reuse code.

 

What is the purpose of React Props? As we already know, React is one of the most used JavaScript frameworks in recent years. Props have an important function: they pass data from one component to another, thus offering a channel through which the components can communicate.

 

There is one rule you should learn before you start using React Props: all components should work the same way as a pure function (with regards to props).

 

How to use React Props to make a header

 

First, you must pass the Prop as an attribute to the functional component, after this, you can have access to the Prop and the data within the component.

 

Use a Prop in the header component

 

function Header (props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
export default Header;

 

The header component above takes a prop attribute and uses it to access data about the app's title. For this component to be visible in the user interface, you must insert it into React's App.js file.

 

The App.js File

 

import Header from './components/Header';
function App () {
return (
<div>
<Header title = 'Task Tracker' />
</div>
);
}
export default App;

 

This code shows the App.js file in React, which is processed in the user interface. The application component displays the Header or Header in the interface using the "Header" tag and this tag contains a Prop and a Prop value, so you now have access to a title property that can be used in this section.

 

Use default Props

 

The updated App.js file should look like this:

 

import Header from './components/Header';
function App () {
return (
<div>
<Header />
</div>
);
}
export default App;

 

By doing this the UI will show a blank header but there is a simple way to fix this. By adding a default Prop to the component that uses the Prop, you can effectively solve the problem. Even if the component does not receive a Prop, it will always have one that it can work with.

 

Example of using a default Prop

 

function Header (props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
Header.defaultProps = {
title: 'The App Name'
}
export default Header;

 

With this code, the header will now be able to use a default Prop to display the header in the UI, without needing to insert a Prop just for this function in the App.js file.

 

At Rootstack, our developers have managed to create several applications with the use of React, solving the problems of our regional and international clients. If you want to be part of a multicultural team, click here and get in touch with us, tell us about your talent and start growing professionally in the exciting world of web development.

 

We recommend you on video


 

Content
Title
Let's work together!
Text Alignment
Left
Webform
Margin
With Large margin top
FAQ's
Question
Does React use Bootstrap?
Answer

On their official website, they define Bootstrap as "the world's most popular open-source front-end toolkit, including Sass variables and mixins, a responsive grid system, extensive prebuilt components, and powerful JavaScript plugins."

 

It is possible to integrate both technologies to work in the frontend of an application or website.
 

Question
What are components in React?
Answer

Components allow you to break your user interface into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary input (called "props") and return React elements that describe what should appear on the screen.

Question
Are there tools for Devops in React?
Answer

Dev Tools, or React Dev Tools, is an extension available in Chrome and Firefox to make debugging your app easier by giving you all the details like props, hooks, and anything else for each component.

Thumbnail
Image
Cloud Computing
Weight
6
Hero
Title
How to use Props in ReactJS
Image
Image
Software Consulting Services
Text Color
White
Text Alignment
Left
Size
Medium
Overlay effect
Hide overlay effect
Date