How To Set Default Props On React Component

In this blog, you will see how to set default props on React Component.

Props

Props are read-only and used for passing data from parent to child components. Please refer Props for more details.

Prerequisites

Click here to set up development environment for React.

Steps Involved

  • Open the root folder in Visual Studio Code by running the following command.

    code .

  • Open App.jsx file and add the below code snippet.

    1. import React from 'react';  
    2. class App extends React.Component {  
    3.     render() {  
    4.         return ( < div > < p > {  
    5.             this.props.lastnameProp  
    6.         }, {  
    7.             this.props.firstNameProp  
    8.         } < /p> < /div>);  
    9.     }  
    10. }  
    11. App.defaultProps = {  
    12.     firstNameProp: "Vijai Anand",  
    13.     lastnameProp: "Ramalingam"  
    14. }  
    15. export default App;  

     

  • Open main.js file and add the below code snippet.

    1. import React from 'react';  
    2. import ReactDOM from 'react-dom';  
    3. import App from './App.jsx';  
    4. ReactDOM.render(<App />, document.getElementById('app'));  

     

  • Open index.html file and add the below code snippet.

    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3.   
    4. <head>  
    5.     <meta charset="UTF-8">  
    6.     <title>React App</title>  
    7. </head>  
    8.   
    9. <body>  
    10.     <div id="app"></div>  
    11.     <script src="index.js"></script>  
    12. </body>  
    13.   
    14. </html>  

     

Testing

Run the following command to start the Server. Open the browser and type http://localhost:8080/.

npm start

 

Summary

In this blog, you have seen how to set default props on React Component.