Using XMLHttpRequest to send a Mailchimp API request in my React Typescript App so users subscribe to the newsletter

I want to use Mailchimp API in my website so users can enter their email in a field and subscribe to a newsletter. I do not want to use any libraries.

I created a simple form for now with an email field and subscribe button for testing purposes and tried to achieve my goal with XMLHttpRequest. However it does not work, and I am not sure whats wrong or if I need another approach? Is my code structure for the API request correct? I created a Codesandbox with the code. If needed I can paste it also here.

The issue is the onSubmit() callback on your "form" element is never executed. In order for the onSubmit() callback on your form to be called upon clicking the "Subscribe" button, the button needs to have a type="submit" attribute on it.

i.e.,

const handleSubmit = () => { ... }

return (
   ...
    <Box 
      onSubmit={handleSubmit}
    >
      <TextField ... />

      <Button
        type="submit"  <-- Add this in order to call onSubmit() upon click
      >
        Subscribe
      </Button>
    </Box>
   ...

Edit:

OP is using the MailChimp API from the client. The MailChimp API will not work on the client side. You can only use the MailChimp API on the server side.

However, you can utilize MailChimp's embedded form action URL to subscribe to user's emails on the client side (in a React component). You can avoid the user from being forwarded to MailChimp by sending a fetch POST request with the embedded form action URL.

This below example may need some tweaking, but this is the general idea on how this can be accomplished.

function handleSubmit(event) {
    event.preventDefault();

    // fetch URL is from MailChimp embedded form action url.
    fetch('http://mailchimp.us8.list-manage.com/subscribe/post', {
        method: 'POST',
        // Not sure if MailChimp used urlencoded or json. You can modify this request to use either.
        headers:{
          'Content-Type': 'application/x-www-form-urlencoded'
        },    
        body: new URLSearchParams({
            'u': 'a123cd45678ef90g7h1j7k9lm',  <-- found in embedded form code.
            'id': 'ab2c468d10',  <-- found in embedded form code.
            'MERGE0': email,  <-- email to be subscribed.
    })
    });
}