little token
So I'm building this app with Authenticator pre-built UI component. I'm able to pass my custom cognito attribute with a value of what ever the input text value was to the backend . But I want to have an option in sign up form where instead of input type text. The sign up form would contain a selectField prebuilt UI component who selected value will be map to custom cognito attribute to send to back end. So I can display a user favorite fruit on the front-end. I've posted my code below for reference. Any help would be greatly appreciated.
import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
import { SelectField } from "@aws-amplify/ui-react";
const Login = () => {
const DefaultSelectFieldExample = () => (
<SelectField label="Fruit" descriptiveText="What's your favorite fruit?">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</SelectField>
);
const signUpFields = {
signUp: {
"custom:fruit": {//have this be a drop down list using the selectFieldComponent, with value of a fruit a user selected.
placeholder: "What's your favorite fruit?",
isRequired: true,
label: "Fruit:",
order: 5,
},
email: {
order: 1,
},
username: {
order: 2,
},
password: {
order: 3,
},
confirm_password: {
order: 4,
},
},
};
return (
<Authenticator formFields={signUpFields}>
{({ signOut, user }) => (
<main>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
<h2> my favorite fruit is {user.attributes["custom:fruit"]} </h2>//display the value the user selected on sign up for their favorite fruit.
</main>
)}
</Authenticator>
);
};
export default Login;
dawn jay
rancid surge
vestal dirge