title: "TypeError: Failed to construct 'Request'" issued within component handler method
body: <p>I'm trying to fetch some data from local server by using fetch api within a component method. After clicking on the button, handler method defined in the context of parent component will be triggered to fetch data and update state of the current component and so its children props (component containing inputs and submit button), but I got an Error.</p>
  
  <p><strong>NewComment.js</strong> </p>
  
  <pre><code>class NewComment extends Component {
      render()
      {
          return (
              &lt;DivNewComment&gt;
                  {
                      this.props.accessToken ?
                          //textarea
                          &lt;CommentTextarea
                              name="commentContentValue"
                              onChange={this.props.handleCommentValueChange} /&gt; :
                          &lt;div className="alert alert-warning"&gt;
                              &lt;span
                              onClick={this.props.handleToggleLoginModal} &gt;
                                  Login required
                              &lt;/span&gt;
                          &lt;/div&gt;
                  }
                  {
                      this.props.accessToken &amp;&amp;
                      &lt;div className="comment-options"&gt;
                          &lt;label className="score-title"&gt;score&lt;/label&gt;
                          &lt;input className="score-input" 
                                 name="commentScoreValue" 
                                 onChange={this.props.handleCommentValueChange} /&gt;
                          &lt;SubmitButton onClick={this.props.handleNewComment}&gt;Submit&lt;/SubmitButton&gt;
                      &lt;/div&gt;
                  }
              &lt;/DivNewComment&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>Post.js</strong></p>
  
  <pre><code>class Post extends Component {
      constructor(props)
      {
          super(props);
          this.state = {
              commentContentValue: '',
              commentScoreValue: '',
          };
          this.handleNewComment = this.handleNewComment.bind(this);
          this.handleCommentValueChange = this.handleCommentValueChange.bind(this);
      }
  
      handleNewComment(e)
      {
          if (this.state.commentContentValue.trim() !== '')
              if (!isNaN(parseInt(this.state.commentScoreValue)) &amp;&amp; parseInt(this.state.commentScoreValue) &gt;= 1 &amp;&amp; parseInt(this.state.commentScoreValue) &lt;= 10) { //simple score range validator
                  const headers = JSON.stringify({
                      Accept: 'application/json',
                      'Content-Type': 'application/json',
                      Authorization: `Bearer ${this.props.accessToken}`,
                  });
                  const body = JSON.stringify({
                      content: this.state.commentContentValue,
                      score: this.state.commentScoreValue,
  
                  });
                  const request = new Request("http://localhost:8000/api/posts/1/comments", { //error issues here
                      method: "POST",
                      body,
                      headers,
                  });
                  fetch(request)
                      .then(response =&gt; console.log(response))
                      .catch(e =&gt; console.log(e));
              }
      }
  
      handleCommentValueChange(e)
      {
          this.setState({
              [e.target.name]: e.target.value,
          });
      }
  
      render()
      {
          return (
              &lt;div&gt;
                  &lt;NewComment
                      accessToken={this.props.accessToken}
                      handleCommentValueChange={this.handleCommentValueChange} 
                      handleNewComment={this.handleNewComment} /&gt;
              &lt;/div&gt;
          );
      }
  
  }
  </code></pre>
  
  <p><strong>And I got this on the console:</strong></p>
  
  <pre><code>TypeError: Failed to construct 'Request': The provided value is not of type '(sequence&lt;sequence&lt;ByteString&gt;&gt; or record&lt;ByteString, ByteString&gt;)'
  </code></pre>