In React, the term props mean properties, and these props play a vital role in React’s development process. Components are the building blocks of React. These components use props to enhance their functionality and to reuse code.
React props store primitive values, arrays, or functions. A prop has several features to guarantee its performance, and in this tutorial article, you’ll learn exactly how to use props in your React applications.
What Is the Purpose of React Props?
React is one of the many JavaScript frameworks worth learning.
React props have a very important function; they pass data from one component to another. They provide a channel through which components communicate.
There’s one simple rule you need to learn before you start using React props, all components must function in much the same way as a pure function (with regards to props). This simply means that a React component should never change the value of any of its props. This ensures that props only contain uncompromised data.
Using React Props
To use a prop in React, you’ll first need to pass the prop as an attribute to the functional component. Then you’ll have access to the prop and its data within the component.
For example, if you’re creating a task tracker, one component that you might want to have is a header. This header component will include the title of the app, among other elements. Therefore, the header component can use a prop to get the title of the app.
Using 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 title of the app. To display this Header component in your UI, you’ll first need to insert it into React’s App.js file (using the Header component tag).
The App.js File
import Header from './components/Header';
function App() {
return (
<div>
<Header title='Task Tracker' />
</div>
);
}
export default App;
The code above shows React’s App.js file, which renders to the UI. The App component displays the Header component in the UI by using the <Header> tag. If you look closely at the code, you’ll see that the <Header> tag contains a prop and a prop value. Therefore, the Header component now has access to a title prop that it can use in its section of the UI.
Executing your React application with the App.js file and the new Header component above will generate the following output in your browser:
Using Default Props
The simple Header component in the example above works great if it receives a title prop. However, if you remove the prop that’s passed through the Header component tag (like in the example below).
The Updated App.js File
import Header from './components/Header';
function App() {
return (
<div>
<Header/>
</div>
);
}
export default App;
Then, the React application will start to display the following updated UI in the browser:
As you can see, the UI is now completely blank. Fortunately, there’s a simple way to mitigate this problem. By adding a default prop vale to the component that uses the prop, you’ll effectively remove this problem. This will ensure that even if the component doesn’t receive a prop it will still have a prop value to work with.
Using Default Props Example
function Header(props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
Header.defaultProps ={
title: 'The App Name'
}
export default Header;
The code above produces the following output in the browser:
Because the Header component doesn’t receive a prop, it uses the default prop value. However, if you reinsert the prop into the App.js file, replacing this line of code:
<Header/>
With this one:
<Header title='Task Tracker' />
Then your UI will now display “Task Tracker” as the title of the app. Therefore, the Header component only uses the default prop if it doesn’t receive an external prop.
Protecting the Integrity Of Your Props With PropTypes
React preserves the integrity of props, by preventing the components that receive props from altering their value. One way that you can also preserve the integrity of props is by utilizing the propType property. PropType is a type-checking property, which ensures that the props passed to a component are of a specific type.
For example, the title of a React application is a string value. Then using the propType property to explicitly state the Header component’s prop type is the best way to ensure that the provided prop has a string value.
Using PropTypes Example
import PropTypes from 'prop-types';
function Header(props) {
return (
<div>
<h1> {props.title} </h1>
</div>
);
}
Header.defaultProps ={
title: 'The App Name'
}
Header.propTypes = {
title: PropTypes.string
}
export default Header;
The Header component above now uses the propType property. There’s one key difference between using the propType property and the defaultProps property; to use the propType property you’ll have to import it into the component, whereas the defaultProps property is within the scope of a React component.
Reusing Components With Props
One of the main benefits of React is that it allows you to build your UI using reusable components. React’s composite module makes this functionality possible. It takes a generic component and configures it (with props), to create a more specific component.
Using the task app example, you can create a task component and use this component to render the different tasks a user creates to the UI. First, you’ll need to create the task component.
The Task Component File
import PropTypes from 'prop-types';
function Task(props) {
return (
<div>
<h2> {props.name} </h2>
</div>
);
}
Task.defaultProps ={
name: 'Task Name'
}
Task.propTypes = {
name: PropTypes.string
}
export default Task;
The Task component above is a generic file that you can use to create multiple tasks in your application. The next step is to place your Task component tag (along with the respective props) into the component that will render it to the UI.
Rendering the Task Component in the App Component
import Header from './components/Header';
import Task from './components/Task';
function App() {
return (
<div>
<Header title='Task Tracker' />
<Task name = 'Do Grocery Shopping' />
<Task name = 'Meeting at the Office' />
<Task name = 'Clean the House' />
</div>
);
}
export default App;
The updated React Application will produce the following output in the browser:
Build Complete ReactJS Applications
Having read this article, you should have learned you need to know about React props—from how to create default props, to using props with reusable components.
But this is only the beginning. Many free React tutorials teach you how to create complete react applications, and each of them will help you boost your knowledge even further.