Add contact to a particular group list

[MayhemBliz]

Not sure if you can do this somehow in your package or it is a Pull request.

I would like to add the contact (who submitted the form) to be added to a custom group setup in mailchimp: https://mailchimp.com/help/automatically-add-subscribers-to-a-group-at-signup/

You would do this normally with the followoing line in your form: <input type="hidden" name="group[611][64]" id="mce-group[611]-611-0" value="1">

Tried adding the following to the react component: <input name="group[611][64]" id="mce-group[611]-611-0" defaultValue="1" />

But I take it I need to add these to the submit and onValidated, here is my entire code:

import React, { Component } from "react";
import NewsletterSignup from "react-mailchimp-subscribe";

// a basic form
const CustomForm = ({ status, message, onValidated }) => {
  let email, name;
  const submit = () =>
    email &&
    name &&
    email.value.indexOf("@") > -1 &&
    onValidated({
      EMAIL: email.value,
      NAME: name.value
    });

  return (
    <div
      style={{
        background: "#efefef",
        borderRadius: 2,
        padding: 10,
        display: "inline-block"
      }}
    >
      {status === "sending" && <div style={{ color: "blue" }}>sending...</div>}
      {status === "error" && (
        <div
          style={{ color: "red" }}
          dangerouslySetInnerHTML={{ __html: message }}
        />
      )}
      {status === "success" && (
        <div
          style={{ color: "green" }}
          dangerouslySetInnerHTML={{ __html: message }}
        />
      )}
      <input
        style={{ fontSize: "2em", padding: 5 }}
        ref={node => (name = node)}
        type="text"
        placeholder="Your name"
      />
      <br />
      <input
        style={{ fontSize: "2em", padding: 5 }}
        ref={node => (email = node)}
        type="email"
        placeholder="Your email"
      />
      <input name="group[611][64]" id="mce-group[611]-611-0" defaultValue="1" />
      <br />
      <button style={{ fontSize: "2em", padding: 5 }} onClick={submit}>
        Submit
      </button>
    </div>
  );
};

class Demo extends Component {
  render() {
    const url =
      "****";
    return (
      <div>
        <h1>react-mailchimp-subscribe Demo</h1>
        <h2>Default Form</h2>
        <NewsletterSignup url={url} />
        <h2>Custom Form</h2>
        <NewsletterSignup
          url={url}
          render={({ subscribe, status, message }) => (
            <CustomForm
              status={status}
              message={message}
              onValidated={formData => subscribe(formData)}
            />
          )}
        />
      </div>
    );
  }
}

export default Demo;

[MichaelMarner]

You can do this by adding your group information to the data you are sending in submit:

  const submit = () =>
    email &&
    name &&
    email.value.indexOf("@") > -1 &&
    onValidated({
      EMAIL: email.value,
      NAME: name.value
      "group[611][64]": "1"
    });