How to add email from session into a form in reactjs

user_14134785 0
Viewed 55

Im trying to get the email from the user logged into my react app but having some trouble.

enter image description here

Above is my session coming from cognito

Below is where my data is being added into the form. The fetch()data is added correctly, but i need a way to add the email from cognito.

  componentDidMount() {
fetch("https://ezha2ns0bl.execute-api.ap-southeast-2.amazonaws.com/prod/userdata")
  .then(res => res.json())
  .then(
    (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,
        email: ,
        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,
      });
    },
  )

This is data from fetch()

Item    
userLastName    "Pearson"
userMiddleName  "A"
userEmail   "testapi12@gmail.com"
userType    "jobseeker"
userAbout   "I am Jane and I'm looking for a job"
userFirstName   "Jane"
userState   "VIC"
userPostcode    "3976"
userCity    "Melbourne"

Now i want my email to come from the session and the rest of the information from userdata.

How would i make this happen ?

amazon-cognito reactjs
1 Answers

You need to split both calls into separate functions and then add them componentdidmount(). This is where the state update will occur.

  getFirstApi() {
fetch("https://ezha2ns0bl.execute-api.ap-southeast-2.amazonaws.com/prod/userdata")
  .then(res => res.json())
  .then(
    (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,
      });
    },
  )


 }

  getSecondApi() {
    Auth.currentAuthenticatedUser().then((user) => {
      this.setState({email: user.attributes.email, formemail: user.attributes.email})
     // console.log('user email = ' + user.attributes.email):
    });
  }

  componentDidMount() {
    this.getFirstApi();
    this.getSecondApi();

  }
user_95999980
Related