JSFiddle - React, Tailwind, and code Playground

by Евгений Дзюба

HTML

<div id="root"></div>

CSS

#main{
    margin: auto;
    width: 50%;
    border-radius: 10px
}

.input_name{
    border-radius: 10px;
    border: 1px solid;
    width: 100%;
    box-sizing:border-box;
}

#error{
    color:red;
    font-size: 10px;
    margin-bottom:20px;
}

button{
    border-radius: 20px;
    background-color: yellow;
    margin: 0 auto;
    display: block;
}
button[disabled]{
    background-color: grey;
    margin: 0 auto;
    display: block;
}

React

class Input extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state={text:'', bgColor:'1px solid'};
  }
 
  handleChange(e) {
      let status;
      if (this.props.reg_str.test(e.target.value)) {
          status=true;
      		this.setState({text:'', bgColor: "1px solid"});
      } else {
      		status=false;
          this.setState({text:'Requires at least 3 Latin characters', bgColor:'1px solid red'}); 
      }
      this.props.func (this.props.id,status); 
  }
  render() {
    return (
        <React.Fragment>
          <input className={this.props.id+' input_name'} type={this.props.type}  placeholder={this.props.placeholder} onBlur={this.handleChange} style={{border:this.state.bgColor}} />        
          <div id="error">{this.state.text}</div>
        </React.Fragment>
    );
  }
}

function Button(props){
    return (
         <button name="button" disabled={props.statBtn}>Sign in</button>
    );
}

class Parent extends React.Component {
	 constructor(props) {
    	super(props);
    	this.myCallback = this.myCallback.bind(this);
      this.state = {statBtn:true};
      //this.state.objStatInput=this.props.objStatInput;
  }
  myCallback (id,status){         
      objStatInput[id]=status;
      for (let key in objStatInput ){          
          if (!objStatInput[key]){
            	!this.state.statBtn&&this.setState({statBtn:true})
            	return;
          }
      } 
     this.setState({statBtn:false}) ;		 
  }
  render() {  
    const confInput = [
    		{id:'input1', type:'text', placeholder:'FirstName', reg_str:/[A-z]{3,}/},
        {id:'input2', type:'email', placeholder:'[email protected]', reg_str:/[A-z]{3,}/},
    ]
    return (
    		<fieldset id="main">
           <Input  id={confInput[0].id} type={confInput[0].type} placeholder={confInput[0].placeholder} reg_str={confInput[0].reg_str} func={this.myCallback} />
           <Input  id={confInput[1].id}...