We Keep Coding

React JS Show Proper Modals

I have a registration form where if successful a success modal message pops up and if a error specifically same username or email is used an error modal message pops up. Yet for some reason if registration process is fine (no duplicate username or email) the error message still appears. See code below:
export default function Register() {
const [show, setShow] = useState(null)
const [ error, setError] = useState(null)
const [showError, setShowError] = useState(null)
const handleClose = function () {
setShow(false)
}
const handleSubmit = function () {
setShowError(false)
}
const dataSet = useFormik({
initialValues: {
name: '',
surname: '',
username: '',
email: '',
passcode: '',
confirm: ''
},
})
const validate = Yup.object().shape({
name: Yup.string().required('Name is required'),
surname: Yup.string().required('Surname is required'),
username: Yup.string().required('A Username is required')
.min(5, 'Username must be at least 5 characters')
.max(20, 'Username must not exceed more than 20 characters'),
email: Yup.string().required('Email is required')
.email('Email is Invalid'),
passcode: Yup.string().required('Passcode is required')
.min(5, 'Passcode at least 5 characters')
.max(10, 'Passcode must not exceed 20 characters'),
confirm: Yup.string().required('Confirmation Passcode is required')
.oneOf([Yup.ref('passcode'), null], 'Confirm Passcode does not match')
})
return (
<div className='register-form'>
<Formik initialValues={{dataSet}} validationSchema={validate} validateOnChange={true}
onSubmit={ async (values, actions) => {
try {
await axios.post('/auth/register', values)
setShow(true)
setShowError(false)
actions.setSubmitting(false)
actions.resetForm({
values:{
name: '',
surname: '',
username: '',
email: '',
passcode: '',
confirm: ''
}
})
} catch (error) {
setError(error.response.data)
if(error) {
setShowError(true)
setShow(false)
}
}
}}>
{({handleSubmit, handleChange, values, touched, isValid, errors }) => (
<Form noValidate onSubmit={handleSubmit} >
<h1>Admin Panel Register</h1>
<Row>
<Form.Group as={Col} controlId='formGridName' className='position-relative'>
<Form.Label>Name</Form.Label>
<Form.Control type={'text'}
name={'name'}
placeholder={'Type Name'}
value={values.name}
onChange={handleChange}
isValid={touched.name}
isInvalid={!!errors.name} />
<Form.Control.Feedback type='invalid' tooltip>{errors.name}</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId='formGridSurname' className='position-relative'>
<Form.Label>Surname</Form.Label>
<Form.Control type={'text'}
name={'surname'}
placeholder={'Type Surname'}
value={values.surname}
onChange={handleChange}
isValid={touched.surname}
isInvalid={!!errors.surname} />
<Form.Control.Feedback type='invalid' tooltip>{errors.surname}</Form.Control.Feedback>
</Form.Group>
</Row>
<Row>
<Form.Group as={Col} md='6' controlId='formGridEmail' className='position-relative'>
<Form.Label>Email</Form.Label>
<Form.Control type={'email'}
name={'email'}
placeholder={'Type Email'}
value={values.email}
onChange={handleChange}
isInvalid={!!errors.email}/>
<Form.Control.Feedback type='invalid' tooltip>{errors.email}</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId='formGridUsername' className='position-relative mb-3'>
<Form.Label>Username</Form.Label>
<Form.Control type={'text'}
name={'username'}
placeholder={'Enter Userame'}
value={values.username}
onChange={handleChange}
isInvalid={!!errors.username} />
<Form.Control.Feedback type='invalid' tooltip>{errors.username}</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId='formGridPasscode' className='position-relative mb-3'>
<Form.Label>Passcode</Form.Label>
<Form.Control type={'password'}
name={'passcode'}
placeholder={'Enter Passcode'}
value={values.passcode}
onChange={handleChange}
isInvalid={!!errors.passcode} />
<Form.Control.Feedback type='invalid' tooltip>{errors.passcode}</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId='formGridConfirm' className='position-relative mb-3'>
<Form.Label>Confirm</Form.Label>
<Form.Control type={'password'}
name={'confirm'}
placeholder={'Confirm Passcode'}
value={values.confirm}
onChange={handleChange}
isInvalid={!!errors.confirm} />
<Form.Control.Feedback type='invalid' tooltip>{errors.confirm}</Form.Control.Feedback>
</Form.Group>
</Row>
<Form.Group as={Col} controlId='formGridSubmit'>
<Button variant={'primary'} type={'submit'} >Submit</Button>
</Form.Group>
</Form>
)}
</Formik>
{ error ? (<Modal show={showError} onHide={handleSubmit}>
<Modal.Header closeButton>
<Modal.Title><ErrorOutlineOutlined />{" "}Error</Modal.Title>
</Modal.Header>
<Modal.Body>{error && <p>{error}</p>}</Modal.Body>
<Modal.Footer>
</Modal.Footer>
</Modal>):( <Modal show={show} onHide={handleClose}>
<Modal.Header>
<Modal.Title><InfoOutlined />{" "}Info</Modal.Title>
</Modal.Header>
<Modal.Body>Registration Complete</Modal.Body>
<Modal.Footer>
<Button href={'/admin/login'}>Go to Login </Button>
</Modal.Footer>
</Modal>)}
</div>)
}

Object/state only updating one property on button submission

Creating a function that will update my state based to edit user profile information based on input submitted on a form.
My function is only updating the last input I entered in my form. Here is a snippet of my code
let { user,logOutUser,updateProfile } = useContext(AuthContext)
//store users in state
const[profileUser, setProfileUser] = useState({user})
//handle form submission
const handleSubmit = e => {
console.log(user)
const updatedProfile = {
username: profileUser.username,
email: profileUser.email,
first_name: profileUser.first_name,
last_name: profileUser.last_name,
city: profileUser.city,
country: profileUser.country
}
console.log(updatedProfile)
e.preventDefault();
}
and here's my form:
<Form>
<Row>
<Col className="pr-1" md="6">
<FormGroup>
<label>Username</label>
<Input
placeholder="Username"
type="text"
name="username"
onChange={ e => setProfileUser({'username': e.target.value}) }
/>
</FormGroup>
</Col>
<Col className="pr-1" md="6">
<FormGroup>
<label htmlFor="exampleInputEmail1">
Email address
</label>
<Input
placeholder="Email"
type="email"
name="email"
value={profileUser.email}
onChange={ e => setProfileUser({'email': e.target.value}) }
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col className="pr-1" md="6">
<FormGroup>
<label>First Name</label>
<Input
placeholder="Enter your first name"
type="text"
name="first_name"
onChange={ e => setProfileUser({'first_name': e.target.value}) }
/>
</FormGroup>
</Col>
<Col className="pr-1" md="6">
<FormGroup>
<label>Last Name</label>
<Input
placeholder="Enter your last name"
type="text"
name="last_name"
onChange={ e => setProfileUser({'last_name': e.target.value}) }
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col className="pr-1" md="6">
<FormGroup>
<label>City</label>
<Input
placeholder="Enter your city"
type="text"
name="city"
onChange={ e => setProfileUser({'city': e.target.value}) }
/>
</FormGroup>
</Col>
<Col className="pr-1" md="6">
<FormGroup>
<label>Country</label>
<Input
placeholder="Enter your country"
type="text"
name="country"
onChange={ e => setProfileUser({'country': e.target.value}) }
/>
</FormGroup>
</Col>
<div className="update ml-auto mr-auto">
<Button
className="btn-round"
color="primary"
type="submit"
onClick={handleSubmit}
>
Update Profile
</Button>
</div>
</Row>
</Form>
This is what I have in users:
bio: ""
city: ""
country: ""
exp: *****
first_name: ""
iat: *****
jti: "******"
last_name: ""
photo: "\"profile/2022/03/27/emmanuelpic.png\""
token_type: "access"
user_id: 1
username: "emmanuelS21"
When I console log updateProfile after submitting updated profile data, I am only getting the last input I entered in my form (ie. If I enter last_name, I only see this in my console log while everything else in my object is empty)

Each use of setProfileUser is overwriting the entire object with a new object that contains only one property:
onChange={ e => setProfileUser({'email': e.target.value}) }
You can destructure the current state to build the complete new state:
onChange={ e => setProfileUser({ ...profileUser, 'email': e.target.value}) }
This is notably different from the older setState used in class-based components. With setState the framework would automatically perform partial updates for you. But with the setter function in useState hooks, any update is complete as-is.

when you set the state must add rest of value to new state with {...rest}
onChange={ e => setProfileUser({...profileUser,'username': e.target.value}) }

How to pass semantic checkbox state (true/false) to e.target

The aim: Pass the value of state.TNC and state.promos into the emailjs.sendForm.
Submitted email should see 'true' if the box is checked, false if not.
I am lost for words as to what I need to google to find a resolution that involves semantic and emailjs...
Here is my code that I thought was going to do that for me.
value={this.state.promos}
value={this.state.TNC}
These are the states they should be returning as the values and being passed into the emailjs e.target
this.state = {
TNC: false,
promos: true,
};
The code for the two checkboxes, (I have tried them with and without the value={this.state.TNC})
<Form.Group widths="equal">
<Form.Field>
<Checkbox
label="I agree to the Terms and Conditions"
required
control={Checkbox}
data="TNC"
onChange={this.onToggle}
value={this.state.TNC}
/>
</Form.Field>
<Form.Field>
<Checkbox
label="Send me occasional updates and promotions"
defaultChecked
control={Checkbox}
data="promos"
value={this.state.promos}
onChange={this.onTogglePromos}
/>
</Form.Field>
</Form.Group>
Here is the full code, and you can find a semi-functional version of the form at https://test.ghostrez.net
import emailjs from "emailjs-com";
import { Component } from "react";
import { Button, Checkbox, Form, Input, TextArea } from "semantic-ui-react";
export default class ContactUs extends React.Component {
constructor(props) {
super(props);
this.state = {
TNC: false,
promos: true,
};
}
onToggle = () => {
const TNC = !this.state.TNC;
this.setState({ TNC });
};
onTogglePromos = () => {
const promos = !this.state.promos;
this.setState({ promos });
};
sendEmail = (e, props) => {
e.preventDefault();
if (this.state.TNC !== false) {
return emailjs
.sendForm("tester", "testiTemp", e.target, "user_EPYkKnHwiytfdolol565ljQTCbJkzO7YD")
.then(
(result) => {
alert("Email sent successfully!");
e.target.reset();
},
(error) => {
alert("Email send failed... :( I had one job...");
}
);
} else {
return alert(
"You need to accept the Terms and Conditions before proceeding."
);
}
};
render() {
return (
<Form onSubmit={this.sendEmail}>
<Form.Group widths="equal">
<Form.Field
id="firstName"
control={Input}
label="First name"
name="firstName"
placeholder="First name"
required
/>
<Form.Field
id="lastName"
name="lastName"
control={Input}
label="Last name"
placeholder="Last name"
/>
</Form.Group>
<Form.Group widths="equal">
<Form.Field
id="Email"
control={Input}
label="Email"
name="email"
placeholder="joe#schmoe.com"
required
/>
<Form.Field
id="Phone"
control={Input}
label="Phone"
name="phone"
placeholder="0469 420 689"
required
/>
</Form.Group>
<Form.Field
id="Message"
control={TextArea}
label="Message"
name="message"
placeholder="Message"
required
/>
<Form.Group widths="equal">
<Form.Field>
<Checkbox
label="I agree to the Terms and Conditions"
required
control={Checkbox}
data="TNC"
onChange={this.onToggle}
value={this.state.TNC}
/>
</Form.Field>
<Form.Field>
<Checkbox
label="Send me occasional updates and promotions"
defaultChecked
control={Checkbox}
data="promos"
value={this.state.promos}
onChange={this.onTogglePromos}
/>
</Form.Field>
</Form.Group>
<Form.Field
id="Submit"
control={Button}
type="submit"
value="submit"
positive
content="Submit"
/>
</Form>
);
}
}
Thank you for your help, I really appreciate it.

In order to check, the property is not value but checked, try with this :
<Checkbox
label="I agree to the Terms and Conditions"
required
control={Checkbox}
data="TNC"
onChange={this.onToggle}
checked={this.state.TNC}
/>

This the solution that worked for me, although it only displays if true (checkbox is checked)
I have added id value and value&checked both as (this.state.*state*)
My solution was as follows
<Form.Group widths="equal">
<Form.Field>
<Checkbox
id="Accept_TnCs"
label="I agree to the Terms and Conditions"
required
control={Checkbox}
name="TNC"
value={this.state.TNC}
checked={this.state.TNC}
onChange={this.onToggle}
/>
</Form.Field>
<Form.Field>
<Checkbox
id="Accept_Promos"
label="Send me occasional updates and promotions"
defaultChecked
control={Checkbox}
name="promos"
value={this.state.promos}
checked={this.state.promos}
onChange={this.onTogglePromos}
/>
</Form.Field>
</Form.Group>

React. Form validation

I have a multistep form for signing up. What is the easiest and the best approach for form validation? What should I use? Is it alright to use Formik for that? Could you suggest to me what to do?
Here is one of the forms:
return(
<Container>
<Row className="justify-content-center">
<Col md="8">
<Card border="dark">
<Card.Title className="text-center">New User</Card.Title>
<Card.Body>
<Form>
<Form.Group controlId="formGridFirstName">
<Form.Label>First Name</Form.Label>
<Form.Control type="text" value={formValues.firstName} onChange={handleChange('firstName')} />
</Form.Group>
<Form.Group controlID="formGridLastName">
<Form.Label>Last Name</Form.Label>
<Form.Control type="text" value={formValues.lastName} onChange={handleChange('lastName')} />
</Form.Group>
<Form.Group controlID="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control type="email" value={formValues.email} onChange={handleChange('email')} />
</Form.Group>
<Form.Group controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" value={formValues.password} onChange={handleChange('password')} />
</Form.Group>
<Form.Group controlId="formGridPhone">
<Form.Label>Phone</Form.Label>
<Form.Control type="tel" value={formValues.phone} onChange={handleChange('phone')} />
</Form.Group>
<Button variant="light" type="submit" size="lg" onClick={redirectToHome}>Cancel</Button>
<Button variant="primary" type="submit" size="lg" onClick={saveAndContinue}>Next</Button>
</Form>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
};

You can use Formik and a Yup for validation schema:
https://formik.org/docs/api/formik#validationschema-schema----schema
npm links:
https://www.npmjs.com/package/formik
https://www.npmjs.com/package/yup
It will look like this:
export default function MyForm() {
const initValues = {
firstName: "",
lastName: "",
email: "",
password: "",
phone: ""
};
const schema = Yup.object().shape({
firstName: Yup.string(),
lastName: Yup.string(),
email: Yup.string().email("Email format is invalid."),
password: Yup.string()
.required("No password provided.")
.min(8, "Password is too short - should be 8 chars minimum.")
.matches(/[a-zA-Z]/, "Password can only contain Latin letters."),
phone: Yup.string().phone(" ")
});
return (
<Formik validationSchema={schema} initialValues={initValues}>
{props => {
const {
values,
touched,
errors,
isSubmitting,
handleChange,
setFieldTouched
} = props;
return (
<Container>
<Row className="justify-content-center">
<Col md="8">
<Card border="dark">
<Card.Title className="text-center">New User</Card.Title>
<Card.Body>
<Form>
<Form.Group controlId="formGridFirstName">
<Form.Label>First Name</Form.Label>
<Form.Control
name="firstName"
type="text"
value={values.firstName}
onChange={handleChange}
setFieldTouched={setFieldTouched}
errors={errors}
/>
</Form.Group>
<Form.Group controlID="formGridLastName">
<Form.Label>Last Name</Form.Label>
<Form.Control
name="lastName"
type="text"
value={values.lastName}
onChange={handleChange}
setFieldTouched={setFieldTouched}
errors={errors}
/>
</Form.Group>
<Form.Group controlID="formGridEmail">
<Form.Label>Email</Form.Label>
<Form.Control
name="email"
type="email"
value={values.email}
onChange={handleChange}
setFieldTouched={setFieldTouched}
errors={errors}
/>
</Form.Group>
<Form.Group controlId="formGridPassword">
<Form.Label>Password</Form.Label>
<Form.Control
name="password"
type="password"
value={values.password}
onChange={handleChange}
setFieldTouched={setFieldTouched}
errors={errors}
/>
</Form.Group>
<Form.Group controlId="formGridPhone">
<Form.Label>Phone</Form.Label>
<Form.Control
name="phone"
type="tel"
value={values.phone}
onChange={handleChange}
setFieldTouched={setFieldTouched}
errors={errors}
/>
</Form.Group>
<Button
variant="light"
type="submit"
size="lg"
onClick={redirectToHome}
>
Cancel
</Button>
<Button
variant="primary"
type="submit"
size="lg"
onClick={saveAndContinue}
>
Next
</Button>
</Form>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}}
</Formik>
);
}
But you should change also your Form.Control component:
Add
import { ErrorMessage, getIn } from "formik";
const error = getIn(props.errors, props.name);
and add to your Input these attributes
onChange={(e) => {setFieldTouched("firstName");handleChange(e);}
error={error}
and Error to show
<Error component="div" name={props.name} />

I would suggest adding your own validators and bundling inputs that are of the same type. For example First Name and Last Name are both strings so you can have a validator for string types. You could do it like this
//validator.js
const stringValidator = (value) => {
if(isEmpty(value)){
return { isValid: false, errors: ["Field cannot be blank"] }
}
return { isValid: true, errors: [] }
}
const config = {
firstName: stringValidator,
lastName: stringValidator,
email: emailValidator,
cellphone: cellphoneValidator,
password: passwordValidator
}
const getValidator = (questionId) => config[questionId];
export default (questionId, value) => {
const validate = getValidator(questionId);
return validate(value)
}
...
// Form.js class
answerQuestion(questionId){
return (e) => {
const answer = e.target.value;
const validation = validate(questionId, answer)
const { errors } = validation;
let { fields } = this.state;
fields[questionId] = { errors, value, label: field.label }
this.setState({ fields })
}
}
...
<Form>
{this.state.fields.map( field => {
return(
<Form.Group>
<Form.Label>{field.label}</Form.Label>
<Form.Control type="text" value={field.value} onChange={this.answerQuestion(field.questionId)} />
{field.errors.map(err => <span>{err}</span>}
</Form.Group>
)
}
</Form>

reactjs fetch with parameters from cognito

I'm trying to get the currently logged in users email and use it in my fetch() call. I can currently get the email from getfirstapi() and use it in my form but I'm having trouble passing it into my getSecondApi() where the fetch() is ?
Iv tried creating a getEmail function to return it, but with no luck.
Code
import * as React from "react";
import axios from "axios";
import { Form, Card, Grid } from "tabler-react";
import { Button, Modal } from "semantic-ui-react";
import Auth from '#aws-amplify/auth';
import '../../index.css';
import { arrayOf } from "prop-types";
//const config = require('../config.json');
class GeneralInformation extends React.Component {
constructor(props) {
super(props);
this.state = {
// States from API
firstname: "",
middlename: "",
surname: "",
city: "",
postcode: "",
state: "",
email: "",
about: "",
// States for editable form
formfirstname: "",
formmiddlename: "",
formsurname: "",
formcity: "",
formpostcode: "",
formstate: "",
formabout: "",
// Modal State
open: false,
};
}
getUseremail() {
return Auth.currentAuthenticatedUser().then(user => user.attributes.email)
}
email = Auth.currentAuthenticatedUser().then(user => user.attributes.email)
getFirstApi() {
return Auth.currentAuthenticatedUser().then((user) => {
this.setState({email: user.attributes.email, formemail: user.attributes.email})
});
}
getSecondApi(email) {
fetch(`https://ezha2ns0bl.execute-api.ap-southeast-2.amazonaws.com/prod/userdata?foo=${encodeURIComponent(email)}`)
.then(res => res.json())
.then(
console.log("THIS IS RESULT2 " + email),
(result) => {
this.setState({
firstname: result.Item.userFirstName,
middlename: result.Item.userMiddleName,
surname: result.Item.userLastName,
city: result.Item.userCity,
postcode: result.Item.userPostcode,
state: result.Item.userState,
about: result.Item.userAbout,
formfirstname: result.Item.userFirstName,
formmiddlename: result.Item.userMiddleName,
formsurname: result.Item.userLastName,
formcity: result.Item.userCity,
formpostcode: result.postcode,
formstate: result.Item.userState,
formabout: result.Item.userAbout,
});
console.log("THIS IS RESULT1 " + result)} ,
)
}
componentDidMount() {
this.getFirstApi();
this.getSecondApi();
}
handleChange = (input) => (event) => {
this.setState({ [input]: event.target.value });
};
handleSubmit = async (event) => {
event.preventDefault();
this.setState((prevState) => ({
// If submitting new values, update the state to represent the new data
firstname: prevState.formfirstname,
middlename: prevState.formmiddlename,
surname: prevState.formsurname,
city: prevState.formcity,
postcode: prevState.formpostcode,
email: prevState.formemail,
userState: prevState.formstate,
about: prevState.formabout,
open: false,
}))
try {
const params = {
"userFirstName": this.state.formfirstname,
"userMiddleName": this.state.formmiddlename,
"userLastName": this.state.formsurname,
"userCity": this.state.formcity,
"userPostCode": this.state.formpostcode,
"userEmail": this.state.formemail,
"userState": this.state.formstate,
"userAbout": this.state.formabout,
"userType": "jobseeker"
};
await axios.post('https://qrg3idkox4.execute-api.ap-southeast-2.amazonaws.com/prod/{userEmail}/', params);
}catch (err) {
console.log(`An error has occurred: ${err}`);
}
};
cancelForm = () => {
// If cancelling, reset any fields that have been changed to the original values so that when the modal is re-opened, the old values are shown
this.setState((prevState) => ({
formfirstname: prevState.firstname,
formmiddlename: prevState.middlename,
formsurname: prevState.surname,
formcity: prevState.city,
formpostcode: prevState.postcode,
formstate: prevState.state,
formabout: prevState.about,
open: false,
}));
};
openModal = () => {
this.setState({ open: true });
};
render() {
const {
firstname,
middlename,
surname,
city,
postcode,
state,
email,
about,
formfirstname,
formmiddlename,
formsurname,
formcity,
formpostcode,
formstate,
formabout,
open,
} = this.state;
return (
<div className="card" name="generalInfo">
<Card.Body>
<Grid>
<Grid.Row>
<Grid.Col md={7}>
<Card.Title>General Information</Card.Title>
</Grid.Col>
<Grid.Col md={5}>
{/* MODAL BUTTON */}
<Button
floated="right"
basic
icon="pencil"
type="button"
compact
onClick={this.openModal}
/>
</Grid.Col>
</Grid.Row>
<Grid.Row>
{/* ROW 1 */}
<Grid.Col md={4}>
<Form.Group label="First Name">
<Form.Input name="firstname" readOnly value={firstname} />
</Form.Group>
</Grid.Col>
<Grid.Col md={4}>
<Form.Group label="Middle Name">
<Form.Input name="middlename" readOnly value={middlename} />
</Form.Group>
</Grid.Col>
<Grid.Col md={4}>
<Form.Group label="Surname">
<Form.Input name="surname" readOnly value={surname} />
</Form.Group>
</Grid.Col>
{/* ROW 2 */}
<Grid.Col md={3}>
<Form.Group label="City">
<Form.Input name="city" readOnly value={city} />
</Form.Group>
</Grid.Col>
<Grid.Col md={2}>
<Form.Group label="Post Code">
<Form.Input name="postcode" readOnly value={postcode} />
</Form.Group>
</Grid.Col>
<Grid.Col md={3}>
<Form.Group label="State">
<Form.Input name="state" readOnly value={state} />
</Form.Group>
</Grid.Col>
<Grid.Col md={4}>
<Form.Group label="Email">
<Form.Input name="email" readOnly value={email} />
</Form.Group>
</Grid.Col>
{/* ROW 3 */}
<Grid.Col md={12}>
<Form.Group className="mb=0" label="About Me">
<Form.Textarea
name="aboutme"
rows={3}
disabled
readOnly
value={about}
/>
</Form.Group>
</Grid.Col>
</Grid.Row>
</Grid>
</Card.Body>
{/* MODAL CONTENT */}
<Modal
style={{ position: "relative" }}
closeOnDimmerClick={false}
open={open}
>
<Modal.Header>Edit Info</Modal.Header>
<Modal.Content>
<Form onSubmit={this.handleSubmit}>
<Grid.Row>
<Grid.Col md={4}>
<Form.Group label="First Name">
<Form.Input
name="firstname"
value={formfirstname}
onChange={this.handleChange("formfirstname")}
/>
</Form.Group>
</Grid.Col>
<Grid.Col md={4}>
<Form.Group label="Middle Name">
<Form.Input
name="middlename"
value={formmiddlename}
onChange={this.handleChange("formmiddlename")}
/>
</Form.Group>
</Grid.Col>
<Grid.Col md={4}>
<Form.Group label="Surname">
<Form.Input
name="surname"
value={formsurname}
onChange={this.handleChange("formsurname")}
/>
</Form.Group>
</Grid.Col>
</Grid.Row>
{/* ROW 2 */}
<Grid.Row>
<Grid.Col md={3}>
<Form.Group label="City">
<Form.Input
name="city"
value={formcity}
onChange={this.handleChange("formcity")}
/>
</Form.Group>
</Grid.Col>
<Grid.Col md={2}>
<Form.Group label="Post Code">
<Form.Input
name="postcode"
value={formpostcode}
onChange={this.handleChange("formpostcode")}
/>
</Form.Group>
</Grid.Col>
<Grid.Col md={3}>
<Form.Group label="State">
<Form.Input
name="state"
value={formstate}
onChange={this.handleChange("formstate")}
/>
</Form.Group>
</Grid.Col>
</Grid.Row>
{/* ROW 3 */}
<Grid.Row>
<Grid.Col md={12}>
<Form.Group className="mb=0" label="About Me">
<Form.Textarea
name="aboutme"
rows={3}
value={formabout}
onChange={this.handleChange("formabout")}
/>
</Form.Group>
</Grid.Col>
</Grid.Row>
{/* ROW 4 - SUBMIT */}
<Grid.Row>
<Grid.Col md={12}>
<Button
floated="left"
basic
type="button"
color="red"
onClick={this.cancelForm}
>
{" "}
Cancel{" "}
</Button>
<Button floated="right" basic type="submit" color="green">
{" "}
Accept Changes{" "}
</Button>
</Grid.Col>
</Grid.Row>
</Form>
</Modal.Content>
</Modal>
</div>
);
}
}
export default GeneralInformation;
Form
EDIT
> getEmailApi() { return
> Auth.currentAuthenticatedUser().then((user) => {
> const { attributes = {} } = user;
> console.log(attributes['email']);
> })}
iv created this function to get the email
but don't know how to pass it into the getSecondApi

My Solution
getEmailApi() {
return Auth.currentAuthenticatedUser().then((user) => {
const { attributes = {} } = user;
console.log(attributes['email']);
let email = attributes['email']
return email
})}
getFirstApi() {
return Auth.currentAuthenticatedUser().then((user) => {
this.setState({email: user.attributes.email, formemail: user.attributes.email})
});
}
getSecondApi(email) {
fetch(`https://ezha2ns0bl.execute-api.ap-southeast-2.amazonaws.com/prod/userdata?userEmail=${encodeURIComponent(email)}`)
.then(res => res.json())
.then(
console.log("THIS IS RESULT2 " + email),
(result) => {
this.setState({
firstname: result.Item.userFirstName,
middlename: result.Item.userMiddleName,
surname: result.Item.userLastName,
city: result.Item.userCity,
postcode: result.Item.userPostcode,
state: result.Item.userState,
about: result.Item.userAbout,
formfirstname: result.Item.userFirstName,
formmiddlename: result.Item.userMiddleName,
formsurname: result.Item.userLastName,
formcity: result.Item.userCity,
formpostcode: result.postcode,
formstate: result.Item.userState,
formabout: result.Item.userAbout,
});
console.log("THIS IS RESULT1 " + result)} ,
)
}
BeforDidMount() {
this.getEmailApi().then(email => this.getSecondApi(email)); }
componentDidMount() {
this.BeforDidMount();
this.getFirstApi();
}