Clear the textfield upon success?

[designforhuman]

Thanks for this npm package. However, I can't feature out how to clear the textfield when email is validated?

[arslnb]

Seems like there's no clean way to do this using the library itself. However, I found a work-around doing this — 

<MailchimpSubscribe 
    url={url}
     render={({ subscribe, status, message }) => (
              <MyForm onSubmit={() => this.sendEmail(subscribe)} />
/>

The sendEmail function updates the state, from which MyForm derives the current value, like in an HTML form.

[arslnb]

Slightly jaded at the moment, so my last comment may not have conveyed the solution. Here's some code, which might do a better job — 

class MyComp extends Component {
  state = {
    email: ""
  };

  updateEmail = (e, { name, value }) => {
    this.setState({ email: value });
  };

  sendEmail = callback => {
    if (!!this.state.email) {
      callback({ EMAIL: this.state.email });
      this.setState({ email: "" });
    } else {
      alert("Enter a valid email");
    }
  };

  render() {
    return (
      <MailchimpSubscribe
        url={url}
        render={({ subscribe, status, message }) => (
          <Form
            size="big"
            onSubmit={() => this.sendEmail(subscribe)}
            value={this.state.email}
          />
        )}
      />
    );
  }
}

[wickedst]

Simple solution:

value={status === "success" ? "" : null}

Not sure what boilerplate code I started from but here's my full form:

const CustomForm = ({ status, message, onValidated }) => {
  let email;

  const submit = (e) => {
    email &&
    email.value.indexOf("@") > -1 &&
    onValidated({
      EMAIL: email.value,
    });
    e.preventDefault();

  }

  return (
    <div
      className="px-3 py-4 mb-3"
    >
      <form onSubmit={submit}>
        <div className="input-group">
          <input
            ref={node => (email = node)}
            type="email"
            placeholder="Your email"
            className="form-control"
            value={status === "success" ? "" : null}
          />
          <div className="input-group-append">
            <button
              type="submit"
              className="btn btn-secondary"
            >
              Sign me up
            </button>
          </div>
        </div>
      </form>

      {status === "sending" && <div style={{ color: "blue" }}>sending...</div>}
      {status === "error" && (
        <div
          class="alert alert-danger mb-0 mt-3 small"
          role="alert"
          dangerouslySetInnerHTML={{ __html: message }}
        />
      )}
      {status === "success" && (
        <div
          class="alert alert-success mb-0 mt-3 small"
          role="alert"
          dangerouslySetInnerHTML={{ __html: message }}
        />

      )}
    </div>
  );
};

const subscribeMailchimp = () => {
  return (
    <MailchimpSubscribe
      url={url}
      render={({ subscribe, status, message }) => (
        <CustomForm
          status={status}
          message={message}
          onValidated={formData => subscribe(formData)}
        />
      )}
    />
  );
};

export default subscribeMailchimp;