Please advise me as my react native page does not add all the state items from into the add api
the api is working
I have checked all I can check but unfortunately, I am unable to find out where the error comes formhttpsI have tested the API with data all seems to be working well I have also added the styles and see the code below
import React, { Component } from "react";import { useState } from "react";import { TouchableHighlight, View, TextInput, StyleSheet, KeyboardAvoidingView, Picker, Button, Alert, Text} from "react-native";import DateTimePicker from "react-native-modal-datetime-picker";import { formatDateTime } from "./utilities";const createStartedAddingAlert = () => Alert.alert("Started Adding","Succesfully started Adding", [ { text: "Cancel", onPress: () => console.log("Cancel Pressed"), style: "cancel" }, { text: "OK", onPress: () => console.log("ssssssssssssssssssss started adding>>>>>> ") } ], { cancelable: false } );const createFinishedAddingAlert = () => Alert.alert("Finished Adding","Succesfully finished Adding", [ { text: "Cancel", onPress: () => console.log("Cancel Pressed"), style: "cancel" }, { text: "OK", onPress: () => console.log("ffffffffffffffff finished adding>>>>>> ") } ], { cancelable: false } );class ExpenseForm extends Component { constructor(props) { super(props); this.state = { dataSource: null }; } state = { title: null, description: null, category: "", subcategory: "", thedatetime: "", amount: 0 }; state = { category: "--Select One--" }; handleAddPress = () => { console.log("aaaaaaaaaaaaaaaaaa", this.state); createStartedAddingAlert(); return fetch("https://example.com/expense/api/add_exp.php", { method: "POST", headers: { Accept: "application/json","Content-Type": "application/json" }, body: JSON.stringify({ user_id: "default", title: this.state.title, amount: this.state.amount, description: "", category: this.state.category, subcategory: "", date_time: formatDateTime(this.state.thedatetime) }) }) .then(response => response.json()) .then(responseJson => { this.setState({ isLoading: false, dataSource: responseJson.response_code }); }, console.log("dataSource is >> " + this.state.dataSource)) .catch(error => console.log(error)); createFinishedAddingAlert(); }; handleChangeTitle = value => { this.setState({ title: value }); }; handleChangeAmount = value => { this.setState({ amount: value }); }; handleDatePicked = thedatetime => { this.setState({ thedatetime }); this.handleDatePickerHide(); }; handleDatePickerHide = () => { this.setState({ showDatePicker: false }); }; handleDatePress = () => { this.setState({ showDatePicker: true }); }; render() { return (<View style={{ flex: 1 }}><KeyboardAvoidingView behavior={Platform.OS == "ios" ? "padding" : "height"} style={styles.container}><View style={styles.fieldContainer}><TextInput style={styles.text} placeholder="Expense Title" spellCheck={false} value={this.state.title} onChangeText={this.handleChangeTitle} /></View><View style={styles.fieldContainer}><TextInput style={styles.text} placeholder="Amount" spellCheck={false} value={this.state.amount} keyboardType={"numeric"} onChangeText={this.handleChangeAmount} /></View><View style={styles.fieldContainer}><TextInput style={[styles.text, styles.borderTop]} placeholder="Event date" spellCheck={false} editable={!this.state.showDatePicker} onFocus={this.handleDatePress} value={formatDateTime(this.state.thedatetime)} /><DateTimePicker isVisible={this.state.showDatePicker} mode="datetime" onConfirm={this.handleDatePicked} onCancel={this.handleDatePickerHide} /></View><View style={styles.pickerContainer}><Picker selectedValue={this.state.category} style={{ height: 50, width: 200 }} onValueChange={(itemValue, itemIndex) => this.setState({ category: itemValue }) }><Picker.Item label="--Select One--" value="--Select One--" /><Picker.Item label="Automobile" value="Automobile" /><Picker.Item label="Clothing" value="Clothing" /><Picker.Item label="Debt Reduction" value="Debt Reduction" /><Picker.Item label="Education" value="Education" /><Picker.Item label="Entertainment/Fun" value="Entertainment/Fun" /><Picker.Item label="Family" value="Family" /><Picker.Item label="Food" value="Food" /><Picker.Item label="Gifts" value="Gifts" /><Picker.Item label="Giving" value="Giving" /><Picker.Item label="Household Items/Supplies" value="Household Items/Supplies" /><Picker.Item label="Insurance" value="Insurance" /><Picker.Item label="Investments" value="Investments" /><Picker.Item label="Maintenance" value="Maintenance" /><Picker.Item label="Medical" value="Medical" /><Picker.Item label="Personal" value="Personal" /><Picker.Item label="Shelter/Home" value="Shelter/Home" /><Picker.Item label="Training" value="Training" /><Picker.Item label="Transportation" value="Transportation" /><Picker.Item label="Travel/Vacations" value="Travel/Vacations" /><Picker.Item label="Utilities" value="Utilities" /></Picker></View><TouchableHighlight onPress={this.handleAddPress} style={styles.button}><Text style={styles.buttonText}>Add</Text></TouchableHighlight></KeyboardAvoidingView></View> ); }}const styles = StyleSheet.create({ fieldContainer: { marginTop: 20, marginLeft: 20, marginRight: 20, backgroundColor: "#fff" }, text: { height: 40, margin: 0, marginRight: 7, paddingLeft: 10 }, borderTop: { borderColor: "#edeeef", borderTopWidth: 0.5 }, button: { height: 50, backgroundColor: "#48BBEC", borderColor: "#48BBEC", alignSelf: "stretch", margin: 10, justifyContent: "center", alignItems: "center", borderRadius: 5 }, buttonText: { color: "#fff", fontSize: 18 }, pickerContainer: { flex: 1, paddingTop: 5, alignItems: "center" }});export default ExpenseForm;