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">
4. <head>
5. <meta charset="UTF-8">
6. <title>React App</title>
7. </head>
9. <body>
10. <div id="app"></div>
11. <script src="index.js"></script>
12. </body>
14. </html>