traintocode

Handling Form Submit

The next step is to create an event handler for when your form is submitted that makes a fetch() request to the Lambda function you created in steps 1 & 2.

A form submit handler in TypeScript looks like this:

const onSubmit: React.FormEventHandler = async (e) => {
  e.preventDefault();
  // your code here...
}

It can be linked to the <form> tag's submit event:

<form onSubmit={onSubmit}>
  {/* Your form inputs */}
</form>

For the [Fetch API}(https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) request you can use this as the Lambda function URL:

const functionUrl = 'https://xxxxxxxxx.lambda-url.eu-west-2.on.aws/';

Exercise

1. Create an async onSubmit event handler that sets the isBusy variable in the state to true.

2. Make a Fetch request to the url above passing the current value of subject in the request body.

3. Set the response from the Fetch request into your imageUrl variable and set isBusy back to false.

You cannot do the coding exercises on this device, visit this page on a larger screen.

App.tsx

⋮