React Props

Introduction

In this chapter, we will explore React props, which are a fundamental concept in React for passing data from parent components to child components. We will understand what props are, how to use them, and their key features.

Table of Contents

1. What are Props?
2. Using Props in React
3. Default Props
4. PropTypes for Type Checking
5. Key Features of Props
6. Conclusion

What are Props?

Props, short for properties, are inputs to a React functional component. They are passed to the component via attributes in the JSX code. Props allow you to pass data from a parent functional component to a child functional component, enabling dynamic and reusable components.

Using Props in React

Props are read-only and cannot be modified by the child component. Let’s create an example to demonstrate how to use props in React.

Example:

1. Create a New File for the Component: In the src directory, create a new file named Greeting.js.
2. Define the Component: Add the following code to Greeting.js to create a functional component that uses props:

   // Greeting.js
   import React from 'react';
   
   function Greeting(props) {
     return (
       <div>
         <h1>Hello, {props.name}!</h1>
       </div>
     );
   }
   
   export default Greeting;
   

3. Use the Component in App.js: Open src/App.js and modify the App component to use the Greeting component:

   // App.js
   import React from 'react';
   import Greeting from './Greeting';
   
   function App() {
     return (
       <div>
         <Greeting name="Amit" />
         <Greeting name="Priya" />
         <Greeting name="Ravi" />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see the greeting messages for “Amit,” “Priya,” and “Ravi.”

In this example, the Greeting component receives a name prop and uses it to display a personalized greeting message.

Default Props

You can define default values for props in case they are not provided by the parent component. This is done using the defaultProps property.

Example:

1. Add Default Props: Modify the Greeting component to include default props:

   // Greeting.js
   import React from 'react';
   
   function Greeting(props) {
     return (
       <div>
         <h1>Hello, {props.name}!</h1>
       </div>
     );
   }
   
   Greeting.defaultProps = {
     name: 'Guest'
   };
   
   export default Greeting;
   

2. Use the Component in App.js: You can omit the name prop for one of the Greeting components to see the default value in action:

   // App.js
   import React from 'react';
   import Greeting from './Greeting';
   
   function App() {
     return (
       <div>
         <Greeting name="Amit" />
         <Greeting name="Priya" />
         <Greeting />
       </div>
     );
   }
   
   export default App;
   

3. Save and View Changes: Save the files and go to your browser. You should see the greeting messages for “Amit,” “Priya,” and “Guest.”

PropTypes for Type Checking

To ensure that components receive the correct type of props, you can use PropTypes for type checking. This helps in catching bugs and ensuring that components are used correctly.

Example:

1. Install PropTypes: First, you need to install the prop-types package:

   npm install prop-types
   

2. Add PropTypes to the Component: Modify the Greeting component to include PropTypes:

   // Greeting.js
   import React from 'react';
   import PropTypes from 'prop-types';
   
   function Greeting(props) {
     return (
       <div>
         <h1>Hello, {props.name}!</h1>
       </div>
     );
   }
   
   Greeting.defaultProps = {
     name: 'Guest'
   };
   
   Greeting.propTypes = {
     name: PropTypes.string
   };
   
   export default Greeting;
   

3. Use the Component in App.js: Ensure the name prop is passed correctly:

   // App.js
   import React from 'react';
   import Greeting from './Greeting';
   
   function App() {
     return (
       <div>
         <Greeting name="Amit" />
         <Greeting name="Priya" />
         <Greeting />
       </div>
     );
   }
   
   export default App;
   

4. Save and View Changes: Save the files and go to your browser. You should see the greeting messages for “Amit,” “Priya,” and “Guest.” If a prop of the wrong type is passed, you will see a warning in the console.

Key Features of Props

1. Data Passing: Props allow you to pass data from parent components to child components.
2. Read-Only: Props are read-only and cannot be modified by the child component.
3. Default Values: You can define default values for props using defaultProps.
4. Type Checking: PropTypes provide a way to perform type checking on props, ensuring that components receive the correct type of data.

Conclusion

1. Props is a special keyword in React that stands for properties. It is used to pass data from one component to another, mostly from the parent component to the child component. 
2. We can say props is a data carrier or a means to transport data.
3. React props is an object that you get instantly when you create a React component.