title: Post request in react
body: <h1>Unable to send POST request by using fetch method</h1>
  
  <p>I am able to fetch request from the server but unable to Post the request dynamically. I am taking input value but it showing the error below:</p>
  
  <blockquote>
    <p>Error: SyntaxError: "JSON.parse: unexpected character at line 1 column 1 of the JSON data"</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const url = "http://some domain/api/tweets";
  const input = {tweet: {body:  ''}};
   
  class App extends Component{
    constructor(props){
      super(props);
      this.state={
        error:null,
        isLoaded:false,
        data: [],
        value: ''
        
         
        
      }
      this.onSubmit = this.handleSubmit.bind(this);
      this.handleChange = this.handleChange.bind(this);
    }
    
   handleChange(e){
     this.setState({value: e.target.value});
   }
  
    componentDidMount() {
      fetch("http://some domain/api/tweets")
        .then(res =&gt; res.json())
        .then(
          (result) =&gt; {
            this.setState({
              isLoaded: true,
              data: result.data
            });
          },
          
          (error) =&gt; {
            this.setState({
              isLoaded: true,
              error
            });
          }
        )
    }
  
   handleSubmit(e){
    e.preventDefault()
    fetch(url, {
      method: 'POST',  
      body: JSON.stringify(this.state.value),  
      headers:{
        'Content-Type': 'application/json'
      }
    }).then(res =&gt; res.json())
  .then(response =&gt; console.log('Success:', JSON.stringify(response)))
  .catch(error =&gt; console.error('Error:', error));
    }
    render(){
      const { error, isLoaded, data } = this.state;
      if (error) {
        return &lt;div&gt;Error: {error.message}&lt;/div&gt;;
      } else if (!isLoaded) {
        return &lt;div&gt;Loading...&lt;/div&gt;;
      } else {
        return (
          &lt;div className="list-type5"&gt;
         &lt;form onSubmit={this.onSubmit} &gt;
          &lt;input type="text" placeholder="Body" value={this.state.value} onChange={this.handleChange}/&gt;
          
          &lt;input type="submit"  /&gt;
        &lt;/form&gt;
          &lt;ol&gt;
            {data.map(i =&gt; (
              &lt;div key={i.id}&gt;
              &lt;li &gt;
             &lt;a&gt; &lt;b&gt; ID:&lt;/b&gt;  {i.id} | &lt;b&gt; Body:&lt;/b&gt; {i.body} | &lt;b&gt; Views:&lt;/b&gt; {i.views}   &lt;/a&gt;
              &lt;/li&gt;
           
            &lt;/div&gt;
               
            ))}
          &lt;/ol&gt;
          &lt;/div&gt;
        );
      }
    }
  }
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Help would be appreciated.</p>