react-intl-tel-input
react-intl-tel-input copied to clipboard
Published
20 hours ago •
patw0929
patw0929
How to make your library work in class based component?
I was working with your library and found out that for my use case the way i have implement my code is with class components and your library seems to works only with functional component, moreover i tried to adapt my code as per the library(hopefully) but it didn't seemed to work well also, the breaking and had the issue of using useState with Class Component. I'm making a multi step react form can you please suggest me about what changes should i made to make it work also allowing it have state management support as per below :
import React, { Component } from 'react';
import Helmet from 'react-helmet';
import './reg-style/Credentail.css';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';
export class Credential extends Component {
continue = (e) => {
e.preventDefault();
this.props.nextStep();
};
back = (e) => {
e.preventDefault();
this.props.prevStep();
};
render() {
const { values, handleChange } = this.props;
const [ value, setValue ] = useState();
return (
<div>
<Helmet>
<body className="form-bg-col" />
</Helmet>
<div className="login">
<div className="reg-container">
<button onClick={this.back} className="col-form-prev">
<i class="fa fa-chevron-left" />
</button>
<div className="user-detail email">
Email:
<input
onChange={handleChange('Email')}
defaultValue={values.Email}
type="email"
placeholder="Enter your Email"
/>
</div>
<div className="user-detail" onChange={handleChange('Phone')} defaultValue={values.Phone}>
Phone:
<PhoneInput
displayInitialValueAsLocalNumber
placeholder="Enter phone number"
defaultCountry="IN"
value={value}
onChange={setValue}
/>
</div>
<div className="user-detail username">
Username:
<input
onChange={handleChange('Username')}
defaultValue={values.Username}
type="text"
placeholder="Select your unique Username"
/>
</div>
<div className="user-detail password">
Password:
<input
onChange={handleChange('Password')}
defaultValue={values.Password}
type="password"
placeholder="Choose your Password"
/>
</div>
<button onClick={this.continue} className="col-form-next">
<i class="fa fa-chevron-right" />
</button>
</div>
</div>
</div>
);
}
}
export default Credential;
This form is inspired from: Multi Step Form With React & Material UI By Traversy Media
