0

I am a beginner and I'm using Django in the backend of my react native app. I am unable to add data to the django admin panel from my app using fetch method. I am not getting any errors but my data is not getting posted to the backend.I have used the django api as the url in fetch method. Please let me know if any other code snippet is required to check. Would appreciate some help here.

export class LoginScreen extends Component {
  constructor() {
    super();
    this.state = {
      email: '',
      name: '',
    };
  }

  updateValue(text, field) {
    if (field == 'email') {
      this.setState({
        email: text,
      });
    } else if (field == 'pwd') {
      this.setState({
        pwd: text,
      });
    }
  }

  submit() {
    let collection = {};

    collection.email = this.state.email;
    collection.pwd = this.state.pwd;
    console.warn(collection);
    let url='http://10.0.0.2:8000/api/mdlApp/'



    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(collection),
    })
      .then((response) => response.json())
      .then((collection) => {
        console.log('Success:', collection);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }

  render() {
    return (
      <ImageBackground source={require('../images/bg4.png')} style={styles.bg}>
        <SafeAreaView style={styles.container}>
          <Logo />
          <View style={styles.container1}>
            <TextInput
              style={styles.inputBox}
              name="email"
              placeholder="Enter Your Email"
              placeholderTextColor="#ffffff"
              onChangeText={(text) => this.updateValue(text, 'email')}
            />

            <TextInput
              style={styles.inputBox}
              name="pwd"
              placeholder="Enter Your Password"
              secureTextEntry={true}
              placeholderTextColor="#ffffff"
              onChangeText={(text) => this.updateValue(text, 'pwd')}
            />

            <TouchableOpacity
              //onPress={() => this.props.navigation.navigate('HomeApp')}
              onPress={() => this.submit()}
              style={styles.button}
              htmlType="submit">
              <Text style={styles.buttonText}> LOGIN </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.signupTextCont}>
            <Text style={styles.signupText}>Don't have an account yet?</Text>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('Register')}
              style={styles.signupButton}>
              <Text>Register Now</Text>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      </ImageBackground>
    );
  }
}
Seenin Sayyed
  • 11
  • 2

1 Answers1

0

change ur code as follows..install axios first

submit = () => {
   
 const url='http://10.0.0.2:8000/api/mdlApp/' 
    
    let collection = {
     email: this.state.email,
     pwd: this.state.pwd
    };
    
    axios.post(`${url}`, collection, {
    
    headers: {
    'content-type': 'application/json'
    }
    } ).then(res => {
    console.log(res.data)
    }))
    }
Hammad Hassan
  • 606
  • 7
  • 20