ReactJS defaultProps
Last Updated :
24 Nov, 2023
The defaultProps is a React component property that allows you to set default values for the props argument. If the prop property is passed, it will be changed. The defaultProps can be defined as a property on the component class itself, to set the default props for the class.
Prerequisites:
Steps to Create React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Project Structure:
Example: This example demonstrate Creating defaultProps in class-based component.
Javascript
import React, { Component } from "react" ;
class App extends Component {
render() {
return (
<div>
<Person
name= "kapil"
eyeColor= "blue"
age= "23"
></Person>
<Person
name= "Sachin"
eyeColor= "blue"
></Person>
<Person name= "Nikhil" age= "23" ></Person>
<Person eyeColor= "green" age= "23" ></Person>
</div>
);
}
}
class Person extends Component {
render() {
return (
<div>
<p> Name: { this .props.name} </p>
<p>EyeColor: { this .props.eyeColor}</p>
<p>Age : { this .props.age} </p>
</div>
);
}
}
Person.defaultProps = {
name: "Rahul" ,
eyeColor: "deepblue" ,
age: "45" ,
};
export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Creating defaultProps in Functional Component
Now write down the following code in the App.js file. Here, App is our default component where we have written our code using a functional component.
Example: This example creates defaultProps in Functional Components
App.js
import React from 'react' ;
function App(props) {
return (
<div >
<Person name= "kapil" eyeColor= "blue" age= "23" ></Person>
<Person name= "Sachin" eyeColor= "blue" ></Person>
<Person name= "Nikhil" age= "23" ></Person>
<Person eyeColor= "green" age= "23" ></Person>
</div>
);
}
function Person(props) {
return (
<div>
<p> Name: {props.name} </p>
<p>EyeColor: {props.eyeColor}</p>
<p>Age : {props.age} </p>
<hr></hr>
</div>
)
}
Person.defaultProps = {
name: "Rahul" ,
eyeColor: "deepblue" ,
age: "45"
}
export default App;
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...