React Forms

React Forms
vForms play a major role in any website for login,signup etc.
vIn React Forms work little different
vIn HTML, form data is usually handled by the DOM.
vIn HTML element like input tag, the value of the input field is changed whenever the user type.
vIn React ,form data is usually handled by the Components.
vBut,In React,whatever the value user types we save it in state and pass the same value to the input tag as its value, so here its value is not changed by DOM,it is controlled by react state.

Changes in index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './myfile.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import styles from './demo.module.css';

const root = ReactDOM.createRoot(
document.getElementById('root')
);
class Reactform extends React.Component{
constructor(){
super();
this.state={username:"sujitha"};
}
uservalue=(event)=>{
this.setState({username:event.target.value});
}
render(){
return(
<form>
<h1>Hello {this.state.username}</h1>
Enter your name:<input type="text" onChange={this.uservalue}/>
</form>
)
}
}

var mystyle={color:'green',textAlign:'center'}
const element =<div ><Reactform/></div>;
root.render(element);

changes in myfile.scss
$colorvar:green;
$backcolor:#a2b8;
$mycolor:red;
h1{
font:{
size: 70px;
family:sans-serif;

}
$mycolor:yellow;
color:$mycolor;
}
h2{

color:$colorvar;
}

Output

Runtime program for printing your name, your age

Changes in index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

const root = ReactDOM.createRoot(

document.getElementById('root')

);

class Reactform extends React.Component{

constructor(){

super();

this.state={username:" ",age:null,errmsg:""};

}

uservalue=(event)=>{

let n=event.target.name;

let v=event.target.value;

let err="";

if(n==="age"){

if(v!=""&&!Number(v)){

err=<strong>Invalid value, your age must be a number</strong>

}

this.setState({errmsg:err});

this.setState({[n]:v});

}

render(){

return(

<form>

<h1>Hello {this.state.username}</h1>

<h2>Your Age {this.state.age }</h2>

Enter your Name:<input type="text" name='username' onChange={this.uservalue}/>

Enter your Age:<input type="text" name='age' onChange={this.uservalue}/> {this.state.errmsg}

</form>

)

}

var mystyle={color:'green',textAlign:'center'}

const element =<div ><Reactform/></div>;

root.render(element);

Output

React Form With Alert