How to use Props in ReactJS

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