react-input-mask | Input masking component for React Made with attention to UX | Frontend Framework library

    import React, {Component} from 'react';
import InputMask from 'react-input-mask';
import Select from 'react-select';
import {FaCloudUploadAlt} from 'react-icons/fa'

import selectStyles from '../../../styles/selectInputStyles';

import {Content, Half, Form, ImageInput, ImagePreview, HalfInput, Controls, Span} from './styles';

import Location from './Location';
import {SanctumContext} from "react-sanctum";

class PropertyInformation extends Component {

    static contextType = SanctumContext;

    constructor(props) {
        super(props);

        this.state = {
            pname: null,
            image: null,
            imageURL: null,
            email: null,
            website: null,
            fax: null,
            phone: null,
            checkin: null,
            checkout: null,
            address: null,
            country: null,
            state: null,
            city: null,
            latitude: null,
            longitude: null,
            countries: null
        }

        this.loadCountries = this.loadCountries.bind(this);
        this.updateImage = this.updateImage.bind(this);
        this.updateCountry = this.updateCountry.bind(this);
        this.updateState = this.updateState.bind(this);
        this.submit = this.submit.bind(this);
    }

    async loadCountries() {
        await axios.get("/api/v1/countries").then(response => {
            this.setState({countries: response.data});
        })
        .catch(err => {
            message("error", "Countries couldn't be loaded")
        })
    }

    updateImage(image) {
        const reader = new FileReader();
        const url = reader.readAsDataURL(image);

        reader.onloadend = () => {
            this.setState({
                imageURL: [reader.result]
            })
        };
    }

    async updateCountry(selection) {
        await axios.get("/api/v1/states/"+selection.value).then(response => {
            this.setState({
                country: selection.value,
                states: response.data
            });
        })
        .catch(err => {
            message("error", "States couldn't be loaded")
        })
    }

    async updateState(selection) {
        await axios.get("/api/v1/cities/"+selection.value).then(response => {
            this.setState({
                state: selection.value,
                cities: response.data
            });
        })
        .catch(err => {
            message("error", "Cities couldn't be loaded")
        })
    }

    submit(e) {
        e.preventDefault();
        const images = e.target.files
        let form = new FormData()
        form.append("image", images)
        axios.post("/api/v1/set-information", {
            user_id: this.context.user.id,
            name: this.state.pname,
            imageUrl: this.state.imageUrl,
            email: this.state.email,
            website: this.state.website,
            phone: this.state.phone,
            fax: this.state.fax,
            check_in: this.state.checkin,
            check_out: this.state.checkout,
            address: this.state.address,
            country: this.state.country,
            state: this.state.state,
            city: this.state.city,
            zip: this.state.zip,
            lat: this.state.latitude,
            long: this.state.longitude,
        })
        .then(response => {
            if (response.status === 200) {
                this.context.property = response.data.id
                this.props.nextStep(this.state);
            }
        })
        .catch(err => {
            if (err.response.status === 422) {
                message("error", err.response.message)
            }
        })
    }

    componentDidMount() {
        this.loadCountries();
    }

    render() {
        return(
            
                
                     this.submit(e)}>
                        
                            
Property Name*
                             this.setState({pname: e.target.value})} required>

                            {!this.state.imageURL &&
                            
                                
                                
Upload main image
                                 this.updateImage(e.target.files[0])} />
                            
                            }

                            {this.state.imageURL &&
                            
                                
                                
 this.setState({image: null, imageURL: null})}>Remove
                            
                            }

                            
E-mail
                             this.setState({email: e.target.value})}>

                            
Website
                             this.setState({website: e.target.value})}>

                            
                                
                                    
Phone number*
                                     this.setState({phone: e.target.value})}
                                        required
                                        mask="+999 99 999 99"
                                        alwaysShowMask
                                        maskChar="_"
                                        value={this.props.property ? this.props.property.phone : ""}
                                    />
                                
                                
                                    
Fax
                                     this.setState({fax: e.target.value})}
                                        required
                                        mask="+999 99 999 99"
                                        alwaysShowMask
                                        maskChar="_"
                                        value={this.props.property ? this.props.property.fax : ""}
                                    />
                                
                            

                            
                                
                                    
Check-in*
                                     this.setState({checkin: e.target.value})}
                                        required
                                        mask="99:99"
                                        alwaysShowMask
                                        maskChar="_"
                                        value={this.props.property ? this.props.property.check_in : ""}
                                    />
                                

                                
                                    
Check-out*
                                     this.setState({checkout: e.target.value})}
                                        required
                                        mask="99:99"
                                        alwaysShowMask
                                        maskChar="_"
                                        value={this.props.property ? this.props.property.check_out : ""}
                                    />
                                
                            
                        
                        
                            
Address*
                             this.setState({address: e.value})} required>

                            
                                
                                    
Country*
                                     this.updateCountry(e)}
                                        placeholder=''
                                        value={this.props.country ? this.props.country.id : ""}
                                    />
                                

                                
                                    State*
                                     this.updateState(e)}
                                        placeholder=''
                                        value={this.props.state ? this.props.state.id : ""}
                                    />
                                
                            

                            
                                
                                    
City*
                                     this.setState({city: e.value})}
                                        placeholder=''
                                        value={this.props.city ? this.props.city.id : ""}
                                    />
                                

                                
                                    Zip*
                                     this.setState({zip: e.target.value})} required>
                                
                            

                            
                                
                                    
Latitude
                                     this.setState({latitude: e.target.value})}>
                                

                                
                                    
Longitude
                                     this.setState({longitude: e.target.value})}>
                                
                            

                            

                            
                                Previous
                                 this.props.saveDraft(this.state)}>Save as draft

                                Proceed
                            
                        
                    
                
            
        )
    }
}

export default PropertyInformation;