4

I am making a component that is dedicated to be take email subscriber... like this

import React from "react";

class SubscribeOffer extends React.Component {
constructor () {
    super();
    this.state={
        email: ""
    }
}

fillEmailToSubscribe = (event) => {
    this.setState({email: event.target.value});
}

submitEmailToSubscribe = () => {
    if (this.state.email > 3) {
        fetch('https://(myuser).list-manage.com/subscribe/post?u=(somenumber)&id=(myid)'
        ,{
            mode: 'no-cors',
            method:'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                email:this.state.email
            })
        })
        .then(response => response.json())
        .then(() => {
            alert('Thank you for subscribing!');
        })
    }

}

render () {
    return (
        <div>
            <h1>Get updated upcoming events in your inbox everyday!</h1>
            <p>Would you like us to give you updates with future updates upcoming events?</p>
            <input 
                type='email'
                name='email-address'
                id='email-address'
                placeholder="your email" 
                onChange={this.fillEmailToSubscribe}
                required
            />
            <button onClick={this.submitEmailToSubscribe}>Subscribe</button>
        </div>
    )
}
}

export default SubscribeOffer;

However, I only get a response like this

Unhandled Rejection (SyntaxError): Unexpected end of input

when i check how the API respond, it gives me the preview like this enter image description here

Do you have any idea how can i solve this? I was making this to be as simple as people input their email and just click the button and that's it.

Very appreciate for any of your help!

jww
  • 97,681
  • 90
  • 411
  • 885
Ricardo Sawir
  • 81
  • 1
  • 3
  • 7
  • Don’t use `mode: 'no-cors'`. See https://stackoverflow.com/questions/43317967/handle-response-syntaxerror-unexpected-end-of-input/43319482#43319482 and https://stackoverflow.com/questions/43262121/trying-to-use-fetch-and-pass-in-mode-no-cors/43268098#43268098 – sideshowbarker May 25 '18 at 02:06

2 Answers2

6

The error you are getting is because, it sends the empty response( eg. Getting the response as empty object {}), in that you are trying to get the json(). This is because of cors.

Try adding the ** 'Access-Control-Allow-Origin':'*' ** to the header and mode as 'cors'. You need to get the response first from the API.

Jeeva
  • 1,550
  • 12
  • 15
  • Hmm, this gives me a 403 error "Forbidden" It says "You don't have permission to access /subscribe/post on this server." – Ricardo Sawir May 23 '18 at 19:00
0

As your email is string defined in the constructor and you are comparing that email with the number would be your first mistake.

So, you can update the if loop from the 'submitEmailToSubscribe' function with something like:

if(this.state.email.trim() !== '') {
  fetch('https://(myuser).list-manage.com/subscribe/post?u=(somenumber)&amp;id=(myid)'
    ,{
        mode: 'no-cors',
        method:'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            email:this.state.email
        })
    })
    .then(() => alert('Thank you for subscribing!'));
}
Hitesh Chaudhari
  • 705
  • 1
  • 7
  • 12