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:

Default props in functional component react

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

import React from "react";

function PopsDefaultInFunEXP1(props) {

return (

<div>

Default Pops In Fun EXP1

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

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

</div>

);

}

export default PopsDefaultInFunEXP1;

PopsDefaultInFunEXP1.defaultProps = { Name: "JC", Id: 101 };

• Open index.js file and update code as below

import React from "react";

import "./styles.css";

import PopsDefaultInFunEXP1 from "./Components/PopsDefaultInFunEXP1";

export default function App() {

return (

<div className="App">

<PopsDefaultInFunEXP1 />

</div>

);

}

Output:

Props in functional component react

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

import React from "react";

function PopsInFunEXP1(props) {

return (

<div>

Pops In Fun EXP1

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

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

</div>

);

}

export default PopsInFunEXP1;

PopsInFunEXP1.defaultProps = { Name: "JC" };

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import PopsInFunEXP1 from "./component/PopsInFunEXP1";

import "./styles.css";

function App() {

return (

<div className="App">

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

</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:

Form text area control example in react

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

import React, { Component } from "react";

class FormTextareaExp1 extends Component {

constructor(props) {

super(props);

this.state = {

content: ""

};

}

handleSubmitForm = e => {

alert("Textarea Content: " + this.state.content);

e.preventDefault();

};

handleChange = e => {

var value = e.target.value;

this.setState({

content: value

});

};

render() {

return (

<form onSubmit={this.handleSubmitForm}>

<label>Content</label>

<br />

<textarea

cols="45"

rows="5"

value={this.state.content}

onChange={this.handleChange}

/>

<br />

<input type="submit" value="Submit" />

<p>{this.state.content}</p>

</form>

);

}

}

export default FormTextareaExp1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import FormTextareaExp1 from "./component/FormTextareaExp1";

import "./styles.css";

function App() {

return (

<div className="App">

<FormTextareaExp1 />

</div>

);

}

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

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

Output:

Form Select control example in react

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

import React, { Component } from "react";

class FormSelectExp1 extends Component {

constructor(props) {

super(props);

this.state = {

favoriteFlavor: "coconut"

};

}

handleSubmitForm = e => {

alert("Favorite Flavor: " + this.state.favoriteFlavor);

e.preventDefault();

};

handleChange = e => {

var value = e.target.value;

this.setState({

favoriteFlavor: value

});

};

render() {

return (

<form onSubmit={this.handleSubmitForm}>

<p>Pick your favorite flavor:</p>

<select value={this.state.favoriteFlavor} onChange={this.handleChange}>

<option value="grapefruit">Grapefruit</option>

<option value="lime">Lime</option>

<option value="coconut">Coconut</option>

<option value="mango">Mango</option>

</select>

<input type="submit" value="Submit" />

</form>

);

}

}

export default FormSelectExp1;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import FormSelectExp1 from "./component/FormSelectExp1";

import "./styles.css";

function App() {

return (

<div className="App">

<FormSelectExp1 />

</div>

);

}

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

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

Output:

Form input control example in react

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

import React, { Component } from "react";

class FormInputCTRLEXP extends Component {

constructor(props) {

super(props);

this.state = {

fullName: ""

};

}

handleSubmitForm = e => {

alert("Full Name: " + this.state.fullName);

e.preventDefault();

};

handleChange = e => {

var value = e.target.value;

this.setState({

fullName: value

});

};

render() {

return (

<form onSubmit={this.handleSubmitForm}>

<label>

Full Name:

<input

type="text"

value={this.state.fullName}

onChange={this.handleChange}

/>

</label>

<input type="submit" value="Submit" />

<p>{this.state.fullName}</p>

</form>

);

}

}

export default FormInputCTRLEXP;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import FormInputCTRLEXP from "./component/FormInputCTRLEXP";

import "./styles.css";

function App() {

return (

<div className="App">

<FormInputCTRLEXP />

</div>

);

}

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

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

Output:

Form Controlled Component in React

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

import React, { Component } from "react";

class FormControlledComponent extends Component {

constructor(props) {

super(props);

this.state = {

Name: "",

Email: ""

};

}

changeName = event => {

this.setState({ Name: event.target.value });

};

changeEmail = event => {

this.setState({ Email: event.target.value });

};

updateSubmit = event => {

alert("Name:" + this.state.Name + " & Email:" + this.state.Email);

event.preventDefault(); // this line will rrevent post back of component

};

render() {

return (

<div>

Form Controlled Component EXP

<form onSubmit={this.updateSubmit}>

<table>

<tr>

<td>Name:</td>

<td>

<input

id="Name"

type="text"

value={this.state.Name}

onChange={this.changeName}

/>

</td>

</tr>

<tr>

<td>Email:</td>

<td>

<input

id="Email"

type="text"

value={this.state.Email}

onChange={this.changeEmail}

/>

</td>

</tr>

<tr>

<td />

<td>

<button>Submit</button>

</td>

</tr>

</table>

</form>

</div>

);

}

}

export default FormControlledComponent;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import FormControlledComponent from "./component/FormControlledComponent";

import "./styles.css";

function App() {

return (

<div className="App">

<FormControlledComponent />

</div>

);

}

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

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

Output:

Find DOM Node in react

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

import React, { Component } from "react";

import ReactDOM from "react-dom";

class FindDOMNode extends Component {

ChangeDiv1Color = () => {

var myDiv1 = document.getElementById("div1");

ReactDOM.findDOMNode(myDiv1).style.color = "blue";

};

ChangeDiv2Color = () => {

var myDiv2 = document.getElementById("div2");

ReactDOM.findDOMNode(myDiv2).style.color = "red";

};

render() {

return (

<div>

findDOMNode() EXP

<div id="div1">It's div1</div>

<div id="div2">It's div2</div>

<p>

<button onClick={this.ChangeDiv1Color}>Div1 Color</button>

</p>

<p>

<button onClick={this.ChangeDiv2Color}>Div2 Color</button>

</p>

</div>

);

}

}

export default FindDOMNode;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import FindDOMNode from "./component/FindDOMNode";

import "./styles.css";

function App() {

return (

<div className="App">

<FindDOMNode />

</div>

);

}

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

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

Output: