Default props in class component react

• Create Components folder under src folder
• Add PropsDefaultEXP1.js file and add below Code

import React, { Component } from "react";

class PropsDefaultEXP1 extends Component {

render() {

return (

<div>

Default Pops In Class EXP1

<p>{this.props.Name}</p>

<p>{this.props.Id}</p>

</div>

);

}

}

PropsDefaultEXP1.defaultProps = {

Name: "Adi",

Id: 101

};

export default PropsDefaultEXP1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import PropsDefaultEXP1 from "./component/PropsDefaultEXP1";

import "./styles.css";

function App() {

return (

<div className="App">

<PropsDefaultEXP1 />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Props in class component react

• Create Components folder under src folder
• Add PopsExp1.js file and add below Code

import React, { Component } from "react";

class PopsExp1 extends Component {

render() {

return (

<div>

Pops Exp1

<p>{this.props.Name}</p>

<p>{this.props.Id}</p>

</div>

);

}

}

export default PopsExp1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import PopsExp1 from "./component/PopsExp1";

import "./styles.css";

function App() {

return (

<div className="App">

<PopsExp1 Name="adi" Id="100" />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output:

Class Component in React JS

• Create Components folder under src folder
• Add ClassComponents.js file and add below Code

import React,{Component} from 'react';

class ClassComponents extends Component{

render(){

return(

<div>Class Components</div>

);

}

}

export default ClassComponents;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import "./styles.css";

import ClassComponents from "./Components/ClassComponents";

function App() {

return (

<div className="App">

<ClassComponents />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: