React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.hidden {
  display: none;
}

.disable {
  pointer-events: none;
  opacity: .5;

}

Babel + JSX

class Login extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            telValue: '',
            codeValue: '',
            submit: true,
            confirm: false,
            confirmed: false,
            resend: false,
            timer: 30,
            resendTimer: null,
            errorMessage: ''
        };
    }

    timerInterval = () => {
        let tm = setInterval(() => {
            this.setState(previousState => {
                return {
                    timer: previousState.timer - 1
                };
            });
            if(this.state.timer <= 0){
                clearInterval(tm);
                this.setState({resend: true, timer: false})
            }
        }, 1000);
    }


    handleSubmit = (e) => {

        e.preventDefault();
        if(this.state.submit){
            /*
            * POST via axios to api to check if user exist then generate the code
            * */
            this.setState({confirm: true, errorMessage: 'enter code sent  ' + this.state.telValue})
            this.state.resendTimer = this.timerInterval();

        } else {
            this.setState({errorMessage: 'Please'})
        }
    }

    handleReturn = (e) => {
        e.preventDefault();
        this.setState({confirm: false, timer: 30, resend: false})
        this.state.resendTimer = this.timerInterval();
    }

    handleResend = (e) => {
        e.preventDefault();
        if(!this.state.timer){
            /* RESEND CODE */
            alert('code resend');
            this.setState({resend: false, timer: 30})
            this.state.resendTimer = this.timerInterval();
        }
    }

    handleConfirm = (e) => {
        e.preventDefault();
        /*
        * POST via axios to api to check code
        * If code is right/ Call sms api
        * */
        if(this.state.confirmed){
            this.setState({errorMessage: ''})
            alert('Redirect');
        } else {
           ...