Trouble getting the plugin to work

[reinhal]

I have set up the code and configured the plugin in the gatsby-config.js file, but when I click submit the form, I do not get any of the console.log that I expect to see.

Any ideas on what I am missing?

`import React from 'react'
import addToMailchimp from 'gatsby-plugin-mailchimp'

export default class JoinNewsletter extends React.Component {
state = {
email: null,
firstName: null,
lastName: null,
}

_handleChange = e => {
console.log({ [${e.target.name}]: e.target.value });
this.setState({
[${e.target.firstName}]: e.target.value,
})
}

_handleSumbit = e => {
e.preventDefault();
console.log('submit', this.state)
addToMailchimp(this.state.email, {firstName: this.state.firstName, lastName: this.state.lastName})
.then(({msg, result}) => {
console.log('msg', ${result}: ${msg});
if(result !== 'success') {
throw msg;
}
})
.catch(err => {
console.log('err', err);
alert(err);
});
}
render() {
return (

First Name

Last Name

Email

);
}
}`

[benjaminhoffman]

hi @reinhal ... your question is a bit outside the scope of this plugin because even if you remove the plugin code, i think you may still have issues with it?

if that's truly the code you have on the page, you'll notice that the _handleChange and _handleSubmit functions never get called. you need to create html input fields and attach those methods to the fields.

i highly recommend following the tutorial on gatsby. once you get a basic starter working, you can then add additional plugins, like this one. :) good luck!

[reinhal]

thanks @benjaminhoffman. I get it. I see that I was too much in a rush and my html code did not completely paste. I am wondering if there is an issue on the mailchimp side.

But, I am calling both functions. Here is the code again, I had to remove the open and close tags on everything for it to show:

`import React from 'react'
import addToMailchimp from 'gatsby-plugin-mailchimp'

export default class JoinNewsletter extends React.Component {
state = {
email: null,
firstName: null,
lastName: null,
}

_handleChange = e => {
console.log({ [${e.target.name}]: e.target.value });
this.setState({
[${e.target.firstName}]: e.target.value,
})
}

_handleSumbit = e => {
e.preventDefault();
console.log('submit', this.state)
addToMailchimp(this.state.email, {firstName: this.state.firstName, lastName: this.state.lastName})
.then(({msg, result}) => {
console.log('msg', ${result}: ${msg});
if(result !== 'success') {
throw msg;
}
})
.catch(err => {
console.log('err', err);
alert(err);
});
}
render() {
return (
div
form onSubmit={this._handleSubmit}
div
label First Name label
div
input type="text" onChange={this._handleChange} placeholder="first name" name="firstName"
div
div
div
label Last Name label
div
input type="text" onChange={this._handleChange} placeholder="last name" name="lastName"
div>
div
div
label Email label
div
input type="email" onChange={this._handleChange} placeholder="email" name="email"
div
div
div
input type="submit"
div
form
div
);
}
}`