title: Unexpected end of JSON input in react.js
body: <p>I'm getting an </p>
  
  <blockquote>
    <p>Unhandled Rejection (SyntaxError): Unexpected end of JSON input</p>
  </blockquote>
  
  <p>error when I press submit.</p>
  
  <p>this is my code:</p>
  
  <pre><code>onButtonSubmit = () =&gt; {
  this.setState({imageUrl: this.state.input})
  app.models
    .predict(
      Clarifai.FACE_DETECT_MODEL, 
      this.state.input)
    .then(response =&gt; {
      if (response) {
        fetch('http://localhost:3000/image', {
            method: 'put',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              id: this.state.user.id
          })
        }).then((response) =&gt; response.json())
          .then((count) =&gt; {
            this.setState(Object.assign(this.state.user, {entries: count}));
          })
    }
      this.displayFaceBox(this.calculateFaceLocation(response))
    })
  .catch(err =&gt; console.log(err));
  </code></pre>
  
  <p>}</p>
  
  <p><a href="https://gist.github.com/TOcvfan/aa9fea095c93fa646bc341a345f4b779" rel="nofollow noreferrer">My app.js</a></p>
  
  <p>I new to React.js and I want to learn more, but I can't figure out why I get this error, and it goes through because the database gets updated. And when I login again, the page is also updated. </p>
  
  <p>the error I get</p>
  
  <pre><code>    Unhandled Rejection (SyntaxError): Unexpected end of JSON input
  (anonymous function)
  C:/Users/cmham/Projekter/facedetector/src/App.js:94
    91 |     body: JSON.stringify({
    92 |       id: this.state.user.id
    93 |   })
  &gt; 94 | }).then((response) =&gt; response.json())
       | ^  95 |   .then((count) =&gt; {
    96 |     this.setState(Object.assign(this.state.user, {entries: count}));
    97 |   })
  View compiled
  </code></pre>
  
  <p>how do I resolve this?</p>
  
  <p><strong>Edit my server part</strong></p>
  
  <pre><code>app.put('/image', (req, res) =&gt; {
    const { id } = req.body;
    db('users').where('id', '=', id)
      .increment('entries', 1)
      .returning('entries')
      .then(entries =&gt; {
        res.json(entries[0]);
      })
      .catch(err =&gt; res.status(400).json('unable to get entries'))
  })
  </code></pre>
  
  <p><strong>Edit 2</strong>
  Now I receive a 1 from the server but what I need is the updated number from the database.</p>
  
  <p>this is my server now:</p>
  
  <pre><code>app.put('/image', (req, res) =&gt; {
    const { id } = req.body;
    db('users').where('id', '=', id)
      .increment('entries')
      .returning('entries')
      .then(entries =&gt; {
        res.json(entries);
  
  })
    .catch(err =&gt; res.status(400).json('unable to get entries'))
  })
  </code></pre>
  
  <p>and this is my App.js:</p>
  
  <pre><code>onButtonSubmit = () =&gt; {
  this.setState({imageUrl: this.state.input})
  app.models
    .predict(
      Clarifai.FACE_DETECT_MODEL, 
      this.state.input)
    .then(response =&gt; {
      if (response) {
        fetch('http://localhost:3000/image', {
            method: 'put',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
              id: this.state.user.id
          })
        }).then((response) =&gt; response.json())
          .then((count) =&gt; {
             console.log(count)
            this.setState({
              ...this.state.user, entries: count++
  
            });
          })
          .catch(error =&gt; console.log('An error occured ', error))
    }
      this.displayFaceBox(this.calculateFaceLocation(response))
    })
  .catch(err =&gt; console.log(err));
    }
  </code></pre>
  
  <p>I don't get the number from the database, but I no longer get an error</p>