I'm trying out to work on integrating a library called react-phone-number-input with my multi-step react form as per the following as a functional component:
import React, { useState } 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 default function Credential() {
const alter = e => {
e.preventDefault();
this.props.nextStep();
};
const back = e => {
e.preventDefault();
this.props.prevStep();
};
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={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={alter} className="col-form-next">
<i class="fa fa-chevron-right" />
</button>
</div>
</div>
</div>
);
}
While running it, it throws me an error:
TypeError: Cannot read property 'props' of undefined
Credential
C:/Users/Rahul/Desktop/collegefacemash/src/form/register/Credential.js:78
75 | import "react-phone-number-input/style.css";
76 | import PhoneInput from "react-phone-number-input";
77 |
> 78 | export default function Credential(props) {
79 | const alter = e => {
80 | e.preventDefault();
81 | this.props.nextStep();
what should i do to make my app work?
This multi step form is inspired from:
Multi Step Form With React & Material UI by Traversy Media
Your help will be extremely valueable for me...
On a functional component you don't use the this keyword.
I changed your code in order to make it work:
import React, { useState } 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 default function Credential(props) {
const alter = e => {
e.preventDefault();
props.nextStep();
};
const back = e => {
e.preventDefault();
props.prevStep();
};
const {values, handleChange} = props;
const [value, setValue] = useState();
return (
<div>
<Helmet>
<body className="form-bg-col" />
</Helmet>
<div className="login">
<div className="reg-container">
<button onClick={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={alter} className="col-form-next">
<i class="fa fa-chevron-right" />
</button>
</div>
</div>
</div>
);
}
Can you see what I did?
line 7: added props param
line 10 & 15: removed "this"
line 18: removed "this" and changed from [values, handleChange] to {values, handleChange} in order to destructuring your props object