Axios post with TextInput values not working with no trailing error - react-native

Question

I am trying to pass some parameters from TextInput to the body in Axios. It doesn't display any error or return a status using console.log().
I have several ways to see what could have been the problem. I tried to pass the function to ComponentDiDMount and some other components lifecycles with no success. I have also passed the values directly, used Json.parse(), JSON.encode(), JSON.stringify(), no error and yet not returning status. I know there might be a mistake I am making.
More also, I don't know if I am doing this wrongly. I try to fetch data to a dropdown from which I need to use the key to pass the corresponding id of the selected value to category_id. When the page loads, it fetches "category" i.e a field name with corresponding id to the dropdown but only the corresponding is needed to pass to the Axios.post.
import React, { Component } from 'react';
import {
Text,
TextInput,
View,
Image,
TouchableOpacity,
Button,
StyleSheet} from 'react-native';
import { Dropdown } from 'react-native-material-dropdown';
import axios from 'axios';
export default class CreatePost extends Component {
constructor(props){
super(props)
this.state = {
category: [],
title: '',
cat: '',
author:'',
body:''
}
}
static navigationOptions = ()=> {
return{
title: null,
headerStyle: { backgroundColor: '#1A5276', color:'#fff' },
header:null
}
};
componentWillMount(){
axios.get(`http://localhost/rest_api_myblog/api/category/read.php`)
//.then(json => console.log(json.data.data[0].name))
.then(json => json.data.data)
.then(newData => this.setState({category: newData}))
.catch(error => alert(error))
}
onChangeTextPress(key, value){
this.setState((prevState) => {
//let selected = Object.assign({}, prevState.selected);
let selected = Object.assign({},prevState.selected);
selected[key] = value;
return { selected };
}, () => {
this.setState({ cat: this.state.selected[key]});
// console.log(cat);
});
}
onCreate = event => {
event.preventDefault();
const body = {
author :this.state.author,
title : this.state.title,
body : this.state.body,
category_id :this.state.cat
};
axios.post(`http://localhost/rest_api_myblog/api/post/create.php`, JSON.parse(body))
.then(res => {console.log(res)
})
.catch(e => console.log(e));
}
render() {
const data = this.state.category.map((cat, i) =>({
value: cat.name,
key: i
}));
return (
<View style= {styles.container}>
<View><Image style={styles.image} source={require('../images/blog.jpg')}/>
<Text style={styles.header}>Create Post</Text></View>
<View style={{alignItems:'center'}}>
<Text style= {styles.label}>Title</Text>
<TextInput
style={styles.textbox}
placeholder="Title"
onChangeText= {(title)=>{
this.setState({title});
}}
value={this.state.title}/>
<Text style= {styles.label}>Author</Text>
<TextInput
style={styles.textbox}
name='author'
placeholder="Author"
onChangeText= {(text)=>{
this.setState({author: text});
}}
value={this.state.author}
/>
<Text style= {styles.label}>Category</Text>
<Dropdown
dropdownOffset={{top:5, left: 0 }}
containerStyle={{
borderWidth:1,
borderColor:'lightgrey',
borderRadius:13, width:300, height: 40,
paddingLeft:6,
backgroundColor:'#fff'}}
rippleCentered={true}
inputContainerStyle={{ borderBottomColor: 'transparent' }}
data = {data}
valueExtractor={({value})=> value}
onChangeText={(value, key)=>{this.onChangeTextPress( value, key)}}
/>
<Text style= {styles.label}>Body</Text>
<TextInput
style={styles.textbox}
multiline = {true}
numberOfLines = {4}
placeholder="Body"
onChangeText= {(body)=>{
this.setState({body});
}}
value={this.state.body}
/>
<TouchableOpacity style={styles.buttonContainer}
onPress = {()=> {this.onCreate }}
>
<Text style={styles.buttonText}>Create</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
What I actually want is a post method based on the TextInput values entered by the users. More also, the corresponding ID of the selected dropdown value be passed instead of the actual value.
Thank you so much for your assistance.

Answer 1

From what I can read from the code, the problem seems to be in the way you call your onCreate method.
You are doing:
<TouchableOpacity style={styles.buttonContainer} onPress={()=> {this.onCreate }}>
<Text style={styles.buttonText}>Create</Text>
</TouchableOpacity>
Where you should be doing either:
<TouchableOpacity style={styles.buttonContainer} onPress={this.onCreate}>
<Text style={styles.buttonText}>Create</Text>
</TouchableOpacity>
Or:
<TouchableOpacity style={styles.buttonContainer} onPress={() => this.onCreate()}>
<Text style={styles.buttonText}>Create</Text>
</TouchableOpacity>