DEV Community

Setting up a news letter with React and mailchimp

Tallan Groberg on April 08, 2020

In this tutorial, we are going to leverage mailchimp’s API to set up a sign up for a news letter. If you follow any of my other tutorials, you wi...
Collapse
 
jnvee profile image
Jahnavi Jainwal

hello I wanted to ask that since this is the mailchimp component
Subscribe
,
Do I directly put this in app.js? And if I do then I red squiggly lines under the code, so what is " Subscribe" exactly like just a piece of text, a message? i tried putting a semicolon after it and it resolves the squiggly lines issue but its still an error

Collapse
 
tallangroberg profile image
Tallan Groberg

Sorry for the late response,

Where I wrote subscribe is intended to be seen as text to the user saying indicating what the box is for.

Best practice is to put this in an HTML tag.

This was an oversight on my part because it didn’t cause my machine to crash.

Collapse
 
cgobbet profile image
Cassiano Gobbet

Tallan, thanks for the tutorial. I created a separated component, but I still have a problem: the component does not find the URL on the .env file, it says it's undefined. Does .env must have only REACT_APP_MAILCHIMP_URL='Mailchimp_URL' and nothing else?

Collapse
 
tallangroberg profile image
Tallan Groberg

So you can have more than one environment variable. A good way to trouble shoot this would be to see if you could console log the process.env. REACT_APP_MAILCHIMP_URL If you think other things in your .env could be causing problems, my suggestion would be to take out everything that wasn’t an env variable in the file. No commas or semi colons etc.

I hope this helps

Collapse
 
raphaelpinel profile image
Raphaël Pinel

You need to put the .env file in the root folder, not in src and restart your server. Also the dotenv package is not needed anymore, it should work out of the box.
The .env file can contain multiple variables

Collapse
 
tobitech profile image
Tobi Omotayo • Edited

How do I style the form?

Collapse
 
tallangroberg profile image
Tallan Groberg

I hope I’m not to late to answer your question.

This is an nmp package that gives you a little more control over the form But does the same subscription functionality.

npmjs.com/package/react-mailchimp-...

React-mail-chimp-form is more declarative meaning you have to write more code but you can style it and get more Info from your users.

I didn’t use it in my tutorial Because I try and show examples that are as simple as possible but you could replace what you did in this tutorial with the new npm package very easily by following what is in the link at the top.

Collapse
 
nerdicaveman profile image
Inioluwa Sogelola

I believe reactmailchimpsubscribe has a render prop where you can pass a function that returns a jsx Element. The function accepts 3 arguments, I can't remember all of them but it's in the doc.

Collapse
 
raphaelpinel profile image
Raphaël Pinel

From what I read, you don't need dotenv anymore with create-react-app. It is supported out of the box
Create your .env file in the root folder, not in src.
And be sure to restart your server.
Source: stackoverflow.com/questions/491081...

I also noticed that react-mailchimp-subscribe 2.1.1 was not yet supporting React 17, and I had to install it with npm i react-mailchimp-subscribe --force

Collapse
 
tanishadalwadi profile image
Tanisha Dalwadi • Edited

Hello, Where can I find the source code of your tutorial. I have set up the mailchimp but I want to take a look at the whole thing. Because when I hit the subscribe button it just reloads the whole page. I do not know where I am wrong as it does not give any errors...
Please let me know thank you

Collapse
 
cordial profile image
cordial

I'm getting a CORS error is i try this in a next.js react app. does react-mailchimp-subscribe actually work in next.js?

Collapse
 
saiafonua profile image
Saia Fonua

I'd like to figure out how I can send email newletters like how smore.com/ does it.