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:

Axios with Loading and Error Handling in React

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

import React, { Component } from "react";

import axios from "axios";

const API = "https://hn.algolia.com/api/v1/search?query=";

const DEFAULT_QUERY = "redux";

class AxiosLoadingErrorHandling extends Component {

constructor(props) {

super(props);

this.state = {

hits: [],

isLoading: false,

error: null

};

}

componentDidMount() {

this.setState({ isLoading: true });

axios

.get(API + DEFAULT_QUERY)

.then(result =>

this.setState({

hits: result.data.hits,

isLoading: false

})

)

.catch(error =>

this.setState({

error,

isLoading: false

})

);

}

render() {

const { hits, isLoading, error } = this.state;

if (error) {

return <p>{error.message}</p>;

}

if (isLoading) {

return <p>Loading ...</p>;

}

return (

<ul>

{hits.map(hit => (

<li key={hit.objectID}>

<a href={hit.url}>{hit.title}</a>

</li>

))}

</ul>

);

}

}

export default AxiosLoadingErrorHandling;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import AxiosLoadingErrorHandling from "./component/AxiosLoadingErrorHandling";

import "./styles.css";

function App() {

return (

<div className="App">

<AxiosLoadingErrorHandling />

</div>

);

}

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

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

Output:

Conditionally applying CSS classes in React

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

import React, { Component } from "react";

import "./CSSclassesConditionallyApply.css";

class CSSclassesConditionallyApply extends Component {

constructor() {

super();

this.state = { isRed: true };

}

render() {

const isRed = this.state.isRed;

return (

<div>

Conditionally applying CSS classes

<p className={isRed ? "class1" : "class2"}>Example Text</p>

</div>

);

}

}

export default CSSclassesConditionallyApply;

• Add CSSclassesConditionallyApply.css file and add below Code

.class1 {

background-color: red;

}

.class2 {

background-color: blue;

}

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSclassesConditionallyApply from "./component/CSSclassesConditionallyApply";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSclassesConditionallyApply />

</div>

);

}

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

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

Output:

CSS Styling with JavaScript Object in React

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

import React, { Component } from "react";

class CSSJavaScriptObject extends Component {

render() {

const mystyle = {

color: "white",

backgroundColor: "DodgerBlue",

padding: "10px",

fontFamily: "Arial"

};

return (

<div>

CSS with JavaScript Object

<h1 style={mystyle}>Style!</h1>

</div>

);

}

}

export default CSSJavaScriptObject;

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSJavaScriptObject from "./component/CSSJavaScriptObject";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSJavaScriptObject />

</div>

);

}

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

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

Output: