title: React Native Posting/Fetching to Backend
body: <p>I am having trouble posting data to an express backend with React Native via Android Emulator. The goal of the app is to allow customers to post microtask requests like home chores and lawn care where all the data will be stored to a AWS RDS MySQL Server. On the flip side there are freelancers who can view the customer posts through a feed. (For more background view here: <a href="https://askfavr.com" rel="nofollow noreferrer">https://askfavr.com</a>) Now that you know the background onto the issue. </p>
  
  <pre><code>import React, { Component } from 'react';
  import {
      StyleSheet, Text, View, Image,
      TextInput, KeyboardAvoidingView,
      TouchableOpacity, AsyncStorage, ScrollView
  } from "react-native";
  
  
  export default class App extends React.Component {
      state = {
          request: {
              C_Name: '', //this is a placeholder for the addRequest()  method
              Email: '',
              Phone: '',
              Category: '',
              Time_Length: '',
              Street: '',
              City: '',
              C_State: '',
              Zip: '',
              Finish_Before: '',
              Price: '',
              Details: ''
          }
      }
  
      /* Just like getRequests, addRequest does exactly what its named as well. It adds a request
        to the MySQL database following the initialization of the request state. The addRequest()
        uses the post method which then returns are query string containing the new data submitted */
      addRequest = _ =&gt; {
          const { request } = this.state;
          //query string set to remote server  
          fetch(`http://192.168.56.1:4000/requests/add?C_Name=${request.C_Name}&amp;Email=${request.Email}&amp;Phone=${request.Phone}&amp;Category=${request.Category}&amp;Time_Length=${request.Time_Length}&amp;Street=${request.Street}&amp;City=${request.City}&amp;C_State=${request.C_State}&amp;Zip=${request.Zip}&amp;Finish_Before=${request.Finish_Before}&amp;Price=${request.Price}&amp;Details=${request.Details}`)
              .catch(err =&gt; console.error(err))
      }
  
      render() {
          const { request } = this.state; //set state for addRequest()
          return (
              &lt;KeyboardAvoidingView behavior='padding' style={styles.wrapper}&gt;
                  &lt;Text style={styles.header}&gt; Yardwork Request &lt;/Text&gt;
                  &lt;ScrollView&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Name:' value={request.C_Name}
                          onChangeText={Name =&gt; this.setState(request.C_Name)}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Email:' value={request.Email}
                          onChangeText={e =&gt; this.setState({ request: { ...request, Email: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Phone:' value={request.Phone}
                          onChangeText={e =&gt; this.setState({ request: { ...request, Phone: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Category:' value={request.Category}
                          onChangeText={e =&gt; this.setState({ request: { ...request, Category: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Time of Job:' value={request.Time_Length}
                          onChangeText={e =&gt; this.setState({ request: { ...request, Time_Length: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Street:' value={request.Street}
                          onChangeText={e =&gt; this.setState({ request: { ...request, Street: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='City:' value={request.City}
                          onChangeText={e =&gt; this.setState({ request: { ...request, City: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='State:' value={request.C_State}
                          onChangeText={e =&gt; this.setState({ request: { ...request, C_State: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Zip:' value={request.Zip}
                          onChangeText={e =&gt; this.setState({ request: { ...request, Zip: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Complete By:' value={request.Finish_Before}
                          onChangeText={e =&gt; this.setState({ request: { ...request, Finish_Before: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Price:' value={request.Price}
                          onChangeText={e =&gt; this.setState({ request: { ...request, Price: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TextInput
                          style={styles.TextInput} placeholder='Details:' value={request.Details}
                          onChangeText={e =&gt; this.setState({ request: { ...request, Details: e.target.value } })}
                          underlineColorAndroid='black'
                      /&gt;
                      &lt;TouchableOpacity
                          style={styles.btn}
                          onPress={this.addRequest}&gt;
                          &lt;Text&gt; Request &lt;/Text&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/ScrollView&gt;
              &lt;/KeyboardAvoidingView&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
      wrapper: {
          flex: 1,
      },
      container: {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#FFF',
          paddingLeft: 40,
          paddingRight: 40,
      },
      header: {
          fontSize: 24,
          marginTop: 25,
          color: '#000000',
          fontWeight: 'bold',
      },
      TextInput: {
          alignSelf: 'stretch',
          padding: 16,
          marginBottom: 20,
          borderRadius: 12,
          color: '#000000',
          fontSize: 16,
          //backgroundColor: '#fff',
      },
      btn: {
          alignSelf: 'stretch',
          backgroundColor: 'green',
          padding: 20,
          borderRadius: 12,
          alignItems: 'center',
      },
      small: {
          fontSize: 15,
          color: '#000000',
          paddingTop: 10,
      },
  });
  </code></pre>
  
  <p>when I try to run essentially the same thing in react native I get this error </p>
  
  <p><strong>setState(...) takes an object of state variables to update or a function which returns an object of state variables</strong></p>
  
  <p>but in Plain React I can use nearly the exact code with no problem and post data easily</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  class App extends Component {
      state = {
          requests: [], //null state for the getRequests() method
          request: {
              C_Name: '', //this is a placeholder for the addRequest()  method
              Email: '',
              Phone: '' ,
              Category: '',
              Time_Length:'' ,
              Street:'' ,
              City:'' , 
              C_State:'' ,
              Zip:'' , 
              Finish_Before:'' ,
              Price: '',
              Details: ''
          }
      }
  
      /* Mounts the "getRequests" to display on the screen, instead of writing the 
    full method within the componentDidMount() 
    componentDidMount() Purpose: this method takes place before rendering to
    essentially change the state of the arrays and variables if they are no
    longer null. */
      componentDidMount() {
          this.getRequests();
      }
  
      getRequests = _ =&gt; {
          fetch('http://192.168.56.1:4000/requests')
          .then( response =&gt; response.json())
          .then(response =&gt; this.setState({ requests: response.data}))
          .catch( err =&gt; console.error(err))
      }
  
      /* Just like getRequests, addRequest does exactly what its named as well. It adds a request
      to the MySQL database following the initialization of the request state. The addRequest()
      uses the post method which then returns are query string containing the new data submitted */
      addRequest =_ =&gt; {
          const { request } = this.state;
          //query string set to remote server  
          fetch(`http://localhost:4000/requests/add?C_Name=${request.C_Name}&amp;Email=${request.Email}&amp;Phone=${request.Phone}&amp;Category=${request.Category}&amp;Time_Length=${request.Time_Length}&amp;Street=${request.Street}&amp;City=${request.City}&amp;C_State=${request.C_State}&amp;Zip=${request.Zip}&amp;Finish_Before=${request.Finish_Before}&amp;Price=${request.Price}&amp;Details=${request.Details}`) 
          .then(this.getRequests)
          .catch(err =&gt; console.error(err))
      }
  
  
      //Fields of Data for a FAVR Request: 
      //idyard_record, time_posted, C_Name, Email, Phone, Category, Time_Length, Street, City, C_State, Zip, Finish_Before, Price
      //Details, RequestID, Proposals
      renderRequest = ({ idyard_record, C_Name, Category }) =&gt; 
          &lt;div key={idyard_record}&gt;{C_Name}: &lt;b&gt;{Category} &lt;/b&gt;&lt;br/&gt;&lt;br/&gt; &lt;/div&gt; //displays all requests from the MySQL data similar to a flatlist
      render() {
          const { requests, request} = this.state; //set state for getRequests() &amp;&amp; getRequest()
  
  
          const mainDiv = {
              align: 'center',
              justifyContent: 'center',
              flex: '1',
              margin: '2%'
          }
          const divStyle = {
              margin: '2%',
          };
  
          const inputBorder = {
              borderColor: 'lightgrey',
              padding: '5px',
              marginTop: '1%',
              marginLeft: '1%'
          }
  
          return (
              &lt;div className="App" style={mainDiv} &gt;
                  {requests.map(this.renderRequest)}
                  &lt;div&gt;
                      &lt;div style={divStyle} &gt; 
                          &lt;label style={{align: 'left'}} &gt; Name: &lt;/label&gt; 
                          &lt;input style={inputBorder} value={request.C_Name} 
                          onChange={e =&gt; this.setState({ request: {...request, C_Name: e.target.value}})} /&gt; 
                      &lt;/div&gt;
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; Email: &lt;/label&gt; 
                          &lt;input style={inputBorder} value={request.Email} 
                          onChange={e =&gt; this.setState({ request: {...request, Email: e.target.value}})} /&gt; 
                      &lt;/div&gt; 
                      &lt;div style={divStyle} &gt;
                          &lt;label style={{textAlign: 'left'}} &gt; Phone: &lt;/label&gt; 
                          &lt;input style={inputBorder} value={request.Phone} 
                          onChange={e =&gt; this.setState({ request: {...request, Phone: e.target.value}})} /&gt; 
                      &lt;/div&gt; 
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; Category: &lt;/label&gt; 
                          &lt;input style={inputBorder} value={request.Category} 
                          onChange={e =&gt; this.setState({ request: {...request, Category: e.target.value}})} /&gt; 
                      &lt;/div&gt; 
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; Time of Job: &lt;/label&gt; 
                          &lt;input style={inputBorder} value={request.Time_Length} 
                          onChange={e =&gt; this.setState({ request: {...request, Time_Length: e.target.value}})} /&gt; 
                      &lt;/div&gt; 
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; Street: &lt;/label&gt; 
                          &lt;input style={inputBorder} value={request.Street} 
                          onChange={e =&gt; this.setState({ request: {...request, Street: e.target.value}})} /&gt; 
                      &lt;/div&gt;
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; City: &lt;/label&gt; 
                          &lt;input style={inputBorder} value={request.City} 
                          onChange={e =&gt; this.setState({ request: {...request, City: e.target.value}})} /&gt; 
                      &lt;/div&gt;  
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; State: &lt;/label&gt; 
                          &lt;input style={inputBorder} value={request.C_State} 
                          onChange={e =&gt; this.setState({ request: {...request, C_State: e.target.value}})} /&gt; 
                      &lt;/div&gt;  
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; Zip: &lt;/label&gt; 
                          &lt;input style={inputBorder} value={request.Zip} placeholder='55901' 
                          onChange={e =&gt; this.setState({ request: {...request, Zip: e.target.value}})} /&gt; 
                      &lt;/div&gt; 
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; Complete By: &lt;/label&gt; 
                          &lt;input type="datetime-local" style={inputBorder} value={request.Finish_Before} placeholder='55901' 
                          onChange={e =&gt; this.setState({ request: {...request, Finish_Before: e.target.value}})} /&gt; 
                      &lt;/div&gt;
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; Price: &lt;/label&gt; 
                          $&lt;input type="number" style={inputBorder} value={request.Price} placeholder='$20'
                          onChange={e =&gt; this.setState({ request: { ...request, Price:  e.target.value }})} /&gt;
                      &lt;/div&gt; 
                      &lt;div style={divStyle} &gt;
                          &lt;label&gt; Details: &lt;/label&gt; 
                          &lt;textarea rows={3} style={inputBorder} value={request.Details}
                          onChange={e =&gt; this.setState({ request: { ...request, Details:  e.target.value }})} /&gt;
                      &lt;/div&gt; 
                      &lt;button onClick={this.addRequest}&gt; Request FAVR &lt;/button&gt; 
                  &lt;/div&gt; 
              &lt;/div&gt;
          );
      }
  }
  
  export default App;
  </code></pre>
  
  <p>Does anyone have suggestions to resolve this issue? I know the backend isn't  the issue because the plain react app can post to it, and the emulator/plain react app can display the data from the MySQL DB with no issue.  </p>
  
  <p><a href="https://i.stack.imgur.com/34bkH.jpg" rel="nofollow noreferrer">image of react native error</a></p>