removeWhiteSpaces.js

import React, { Component } from 'react';
// import '../Shared/css/separate/pages/login.css';
import {NavLink} from 'react-router-dom';
import PropTypes from 'prop-types';
import Logo from '../Plugins/images/aidahbot-logo-web-blue-bigdots.png';
import Phone from 'react-intl-tel-input';

import '../../../node_modules/react-intl-tel-input/dist/main.css';
import '../../../node_modules/react-intl-tel-input/dist/libphonenumber.js';
// import '../../../node_modules/react-intl-tel-input/dist/main.js';


var field = document.querySelector(".store_name");

console.log(field, 'this is field')
field.addEventListener('onKeyUp', function ( event ) {
    var key = event.keyCode;
    if (key === 32) {
        event.preventDefault();
    }
});

function trim(str) {
    return str.replace(/^\s+|\s+$/g,"");
}

class SignUp extends Component{
    constructor(props) {
        super(props)
        this.state = {
            first_name: '',
            last_name: '',
            store_name: '',
            email: '',
            phone_number: '',
            password: '',
            error: {},
        }

        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onChange(e){
        this.setState(
            {[e.target.name]: e.target.value}
        );
    }



    onSubmit(e){
        e.preventDefault();
        // console.log("this.state====", this.state);
        this.props.userSignUpRequest(this.state).
        then(response => {
            if (!response.success) {
                this.setState({error: response.error.errors});
                return false;
            }
            // Handle successful registration/signup
            alert("You've signed up successfully");
            window.location.href = '/login';

        }).
        catch(error => {
            //
        });

    }



    render(){
        const {error} = this.state;
        return(

                        <form onSubmit={this.onSubmit} className="form-horizontal form-material" id="loginform">
                            <a
                                className="text-center db" href="https://aidahbot.com" target="_blank">  <img style={{width:'180px', display: 'block',
                                marginRight: 'auto', marginLeft: 'auto'}}  src={Logo} alt="Home" />
                            </a>

                            <h3 className="box-title m-t-40 m-b-0">Setup your account</h3><small>No credit card required</small>
                            <br/><br/>
                            <div className="row">
                                <div className="col-6">
                                    <div className="form-group">
                                        <input
                                            name="first_name"
                                            required
                                            onChange={this.onChange}
                                            value={this.state.first_name}
                                            type="text" className="form-control" placeholder="First Name" />
                                        {error.first_name && <span className="form-text text-muted">{error.first_name.message}</span>}
                                    </div>
                                </div>
                                  <div className="col-6">
                                    <div className="form-group">
                                        <input
                                            name="last_name"
                                            required
                                            onChange={this.onChange}
                                            value={this.state.last_name}
                                            type="text" className="form-control" placeholder="Last Name" />
                                        {error.last_name && <span className="form-text text-muted">{error.last_name.message}</span>}
                                    </div>
                                   </div>
                                </div>

                            <div className="row">
                                <div className="col-6">
                                <div className="form-group">
                                <input
                                    className="store_name form-control"
                                    name="store_name"
                                    required
                                    onChange={this.onChange}
                                    value={this.state.store_name.toLowerCase()}
                                    type="text" placeholder="storename" />
                                {error.store_name && <span className="form-text text-muted">{error.store_name.message}</span>}
                                </div>
                            </div>

                                <div className="col-6">

                                <div className="form-group">
                                <input
                                    name="email"
                                    required
                                    onChange={this.onChange}
                                    value={this.state.email}
                                    type="email" className="form-control" placeholder="E-Mail" />
                                {error.email && <span className="form-text error-color">{error.email.message}</span>}
                                </div>
                            </div>
                            </div>
                            <div className="row">
                                <div className="col-6">
                                <div className="form-group">
                                <Phone
                                    name="phone_number"

                                    country={ 'GH' }
                                    css={['intl-tel-input', 'form-control']}
                                    // utilsScript={ '../../../node_modules/react-intl-tel-input/dist/libphonenumber.js' }
                                    onChange={this.onChange}
                                    value={this.state.phone_number}
                                    type="number" className="form-control" placeholder="phone number"
                                     />
                                {error.phone_number && <span className="form-text error-color">{error.phone_number.message}</span>}
                                </div>
                            </div>

                                <div className="col-6">
                                <div className="form-group">
                                <input
                                    name="password"
                                    required
                                    onChange={this.onChange}
                                    value={this.state.password}
                                    type="password" className="form-control" placeholder="Password" />
                                {error.password && <span className="help-block">{error.password}</span>}
                                </div>
                            </div>
                            </div>
                            <div className="form-group text-center m-t-20">
                                <div className="col-xs-12">
                                    <button className="btn btn-color btn-lg btn-block
                                    text-uppercase waves-effect waves-light" type="submit">Sign Up</button>
                                </div>
                            </div>
                            <p className="sign-note">Already have an account? <NavLink to="/login">Sign in</NavLink></p>

                        </form>

        )
    }
}

SignUp.propTypes = {
    userSignUpRequest: PropTypes.func.isRequired,
};


export default SignUp;

handleKeyUp = event => {
var key = event.keyCode;
if (key === 32) {
event.preventDefault();
}
}

   <input
    className="store_name form-control"
    name="store_name"
    required
    onChange={this.onChange}
    onKeyUp={this.handleKeyUp}
    value={this.state.store_name.toLowerCase()}
    type="text" placeholder="storename"
  />