ReactJs Add Dynamic Controls and Get Dynamic Values

Attributes:
       
HTML                           Reactjs

For                                 htmlfor
class                              className

Add dynamic components and get values

styles:
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}
.name{
  border: none;
  padding-top: 36px;
  font-size: 40px;
  font-weight: 800; 
  opacity: none;
  background: transparent;
}
.name::placeholder{
font-size:40px;
font-weight: 800; 
color: blue;
}
input#lname {
  color: black;
  border: none;
  font-size: 40px;
  font-weight: 800;
  padding-bottom: 36px;
}
.form-control:focus{
  box-shadow: none;
}
.placecolor{
  opacity: 0.3;
}
input#spl {
  color: black;
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 22px;
  border: none;
  background: transparent;
}
img#profile {
  width: 80%;
  border-radius: 150px;
  cursor: pointer;
}
#bar{
  border-bottom: 1px solid #80808038;
  padding: 9px;
}

input.inpt {
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: #367fe6;
}
.inpt:focus{
  box-shadow: none;
  outline: none;
}
.inpt::placeholder{
font-size:16px;
font-weight: 500;
color: #367fe6;
}
textarea {
  overflow: auto;
  resize: none;
  border: none;
  height: 5pc;
  width: 90%;
}
textarea:focus {
 box-shadow: none;
outline: none;
}
ul.skls {
  margin-top: 21px;
  line-height: 34px;
  font-size: 18px;

}

progress {
  margin: 4px 0px 0px 33px;
  height: 20px;
  width: 100%;
}
progress::-webkit-progress-value { background:#2196F3!important; }
textarea.educat {
  height: 237px;
  width: 101%;
  overflow: hidden;
  text-align: justify;
}
input.detail {
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
.detail::placeholder{
  color: #000;
}
.detail:focus{
  box-shadow: none;
  outline: none
}
textarea.test {
  height: 22px;
  overflow: hidden;
  color: #000;
  font-weight: 500;

}

Design:

 <div className="col-md-5"> <ul type="none"> <div className="fname" placeholder="PAUL" contentEditable="true" onInput={this.name.bind(this)}  id="fname">{  this.state.dynamicbox.map((value,key)=>{return(<input type="text" id={"test"+key} onkeyup={this.dynamicvalues.bind(this,key)} />);});}

           </div> <button onclick={this.addtextbox.bind(this)} > add</button><button onclick={this.removetextbox.bind(this)} > Remove</button>         </div>          

Styles:

.fname{

  font-size: 42px;

  font-weight: 800 !important;
  color:#38a7e4;
  outline: none;
  line-height: 1.2;
  cursor: text;
  text-transform:uppercase;
}
.fname[contentEditable][placeholder]:empty::before{
  content: attr(placeholder);
  color: #38a7e4;
}
.fname[contentEditable][placeholder]:focus::before{
 opacity:.2;
}

Codes:

class resume extends Component{

constructor(){

  super();

   this.state={ 

    name:"",

    dynamicbox:[""],

    dynamicvalues:[]

} 

}

name(e){

this.setstate({

//content Editable

name:e.target.innerHTML

//form Components

name:e.target.value

)}

}

addtextbox(){

this.setState({

  dynamicbox:[...this.state.dynamicbox," "]

})

}

removetextbox(e){

  this.state.dynamicbox.splice(e,1);

this.setState({

  dynamicbox:this.state.dynamicbox

})

}

dynamicvalues(value,key){

this.state.dynamicvalues[value]=key.target.value;

this.setstate({

dynamicvalues:this.state.dynamicvalues

)}

}

date(value,key){
  const monname=['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var dt3=monname[key.target.value.getMonth()]+" "+key.target.value.getFullYear();
  this.state.projectdate[value]=dt3;
  this.setState({
    projectdate:this.state.projectdate
  })
  console.log(this.state.projectdate)
}

}

React Js Using Login and Signup Page

Prerequisite:

i) Install node js 
ii) open cmd prompt check node is installed type node -v
iii) type npm install -g Create-react-app -->global

Reactjs Create First App:

i)open cmd prompt npx create-react-app login_signup_app
it will take some times for installed dependency

ii) Install Dependency  npm i axios react-router-dom  if you want any npm package installed it npm i (packagename)

iii) switch the under login_signup_app/src   directory your files is located 

iv) then you want create new file or folder your wish 

v) i have create 2 file login.js and signup.js , App.js -->Default file

Code:

App.js:

// import the modules

import  React,{Component} from 'react';

//imported 2 files

import Login from './login';
import Signup from './signup';

import axios from 'axios';

import $ from 'jquery-confirm';

import {

  BrowserRouter as Router,

  Switch,

  Route,

  NavLink,

  Link

} from "react-router-dom";

export default class App extends Component{constructor(){    super();   }

render(){

  return(

    <div>

       <Router>

      <nav className="header">

           <ul type="none" className='nav' >

          <li>

               <NavLink exact activeClassName="active"  to="/">Home</NavLink>

             </li>

             <li>

               <NavLink  to="/login">Login</NavLink>

             </li>

             <li>

               <NavLink  to="/signup">Signup</NavLink>

             </li>

            

           </ul>

         </nav>

         <Switch>         

           <Route exact  path="/" component={Home} />    

           <Route  path="/login" component={Login} />        

           <Route  path="/signup" component={Signup} />        

         </Switch>

         </Router>

    </div>

  )

}

}

class Home extends Component{

constructor(){    super();

}

//file upload Function

upload(e){
  this.setState({
    file:e.target.files[0].name 
  })
  var rdr=new FileReader();
rdr.onload=function(t){
  document.getElementById('profile').src=t.target.result;
}
rdr.readAsDataURL(e.target.files[0]);
const fd=new FormData();
fd.append("image",e.target.files[0]);
 axios({
  method:'post', url:'file.php',
  data:fd ,
  config:{headers:{'content-type': 'multipart/form-data'}}
}).then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
});

} render(){  

return(<div>

//Defalut Page HTML CODES Here

</div>

)}

Login.js:

export default class Login extends Component{

constructor(){

    super();

    this.state={

        email:"",

        pwd:""

    }

}

    email(e){

        this.setState({

            email:e.target.value

        })

    }

    pwd(e){

        this.setState({

            pwd:e.target.value

        })

    }  

login(event){

    var name=this.state.email;

    var pwd=this.state.pwd;

    var sp1=document.getElementById('nm');

var sp2=document.getElementById('pd');

    if(name.length==0 && pwd.length==0){

console.log("Required fileds");

sp1.style.display="block";

sp2.style.display="block";

event.preventDefault();

    }else if(name.length==0 ){

        console.log("Required email");

        sp1.style.display="block";

sp2.style.display="none";

        event.preventDefault();

    }else if(pwd.length==0){

        console.log("Required passwd");

        sp1.style.display="none";

sp2.style.display="block";

        event.preventDefault();

    }else{

        axios({

            url:'http://localhost/sign.php',

            method:'post',

            data:{

              useremail:this.state.email,

              userpwd:this.state.pwd

            },

            headers:{'Access-Control-Allow-Origin': '*'}  

          }).then(function (res){    

              console.log(res.data);

              document.getElementById('frm').reset();

              $.alert({

                  title: 'Message!',

                  content: 'Login Successfully',

              });

          }).catch(function (err){          

          });

    }

    sp1.style.display="none";

    sp2.style.display="none";

}        

    render(){

        return(

<div style={{backgroundImage:"url(bg.jpg)",height:"85vh"}}>   

    <div className="container">

        <div className="row">

           <div className="col-md-4"></div>

           <div className="col-md-5 box">

            <h2 className="text-center">Login Page</h2>

            <form id='frm'>

            

            <div className="form-group">

               <label>Email</label>

               <input type="text" onKeyUp={this.email.bind(this)} className="form-control" placeholder="Enter Email"></input>

               <span id="nm" style={{display:"none",color:"red"}}>Email is Required</span>

            </div>

            <div className="form-group">

               <label>Password</label>

               <input type="password" onKeyUp={this.pwd.bind(this)} className="form-control" placeholder="Enter Password"></input>

               <span id="pd" style={{display:"none",color:"red"}}>Pasword is Required</span>

            </div>

             <lable style={{cursor:"pointer"}}  onClick={this.login.bind(this)}   className="btn btn-primary" >Login</lable>

             </form>

             <br/>

            </div>

            <div className="col-md-1"></div>

        </div>       

    </div>

</div>

        );

    }

} 

Signup.js:

import React,{Component} from 'react';

import axios from 'axios';

import './register.css';

import $ from 'jquery-confirm';

export default class Signup extends Component{

constructor(){

    super();

    this.state={

        uname:"",

        email:"",

        pwd:""

    }

}

name(e){

    this.setState({

        uname:e.target.value

    })

}

email(e){

    this.setState({

        email:e.target.value

    })

}

pwd(e){

    this.setState({

        pwd:e.target.value

    })

}    

    signup(){

axios({

  url:'http://localhost/sign.php',

  method:'post',

  data:{

    username:this.state.uname,

    email:this.state.email,

    passwd:this.state.pwd

  },

  headers:{'Access-Control-Allow-Origin': '*'}  

}).then(function (res){    

    console.log(res.data);

    document.getElementById('frm').reset();

    $.alert({

        title: 'Message!',

        content: 'Register Successfully',

    });

}).catch(function (err){

});

    }

    render(){

        return(

<div style={{backgroundImage:"url(bg.jpg)",height:"85vh"}}>   

    <div className="container">

        <div className="row">

           <div className="col-md-4"></div>

           <div className="col-md-5 box">

            <h2 className="text-center">Register Page</h2>

            <form id='frm'>

            <div className="form-group">

               <label>Username</label>

               <input type="text" onKeyUp={this.name.bind(this)} className="form-control" placeholder="Enter Username"></input>

            </div>

            <div className="form-group">

               <label>Email</label>

               <input type="text" onKeyUp={this.email.bind(this)} className="form-control" placeholder="Enter Email"></input>

            </div>

            <div className="form-group">

               <label>Password</label>

               <input type="password" onKeyUp={this.pwd.bind(this)} className="form-control" placeholder="Enter Password"></input>

            </div>

             <lable style={{cursor:"pointer"}} onClick={this.signup.bind(this)}  className="btn btn-primary" >Register</lable>

             </form>

             <br/>

            </div>

            <div className="col-md-1"></div>

        </div>       

    </div>

</div>

        );

    }

}

Signup.php:

<?php

header("Access-Control-Allow-Origin: *");

header("Access-Control-Allow-Headers: *");

$con=mysqli_connect("localhost","root","","test");

$data = json_decode(file_get_contents('php://input'), true);

@$name=$data['username'];

@$email=$data['email'];

@$pwd=$data['passwd'];

@$useremail=$data['useremail'];

@$userpwd=$data['userpwd'];

if(!empty($name)){

$sql="insert into signup values(NULL,'$name','$email','$pwd')";

$con->query($sql);

echo "Inserted...💜";

}else{    

}

if(!empty($useremail)){

    $sql="select * from signup where Email='$useremail' and Password='$userpwd'";

    $res=$con->query($sql);

    $cnt=mysqli_num_rows($res);

    if($cnt==1){

echo "Login Successfully..🤩";

    }else{

echo "Email or Password is Incorrect..😫";

    }    

}else{   

}

?>

Output: