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)
}

}