I have these paragraphs that I stored in an array. Then I map them to display buttons on my app where each of it is holding the paragraph id. So when a user clicks one specific button, it will pass the paragraph id to a function to get the data from the database and display it to the react native TextInput.
I've tried to reduce my code as much as possible. So here is how it looked like in my code :
constructor(props){
super(props);
this.state = {
open_parag: false, parag: [], update_parag_text: ''
}
}
async componentDidMount(){
const user_id = await AsyncStorage.getItem('user_id');
if(user_id){
this._loadEssayOutlineAttemptPreview(user_id);
}
}
_loadEssayOutlineAttemptPreview(user_id){
var outlineId = this.props.navigation.state.params.outlineId;
EssayOutlineController.loadEssayOutlineAttempt(user_id, outlineId).then(data=>{
if(data.status == true){
this.setState({
parag: data.outline_attempt.parag,
})
}
});
}
_getCurrentParag(parag_id){
EssayOutlineController.loadOneOutlineAttemptParag(parag_id).then(data=>{
if(data.status == true){
this.setState({ update_parag_text: data.parag.paragraph })
}
});
}
openParag = (parag_id) => {
this.setState({ open_parag: true });
this._getCurrentParag(parag_id);
}
_displayParagBtn(){
if(this.state.parag.length > 0){
return this.state.parag.map((data, i)=>
<View key={i} style={[ styles.sideButton, { backgroundColor: Colors.default } ]}>
<TouchableOpacity onPress={()=>this.openParag(data.id)}>
<Text style={[styles.sideButtonTitle, { color: Colors.white }]}>PARAGRAPH</Text>
<Text style={[styles.sideButtonIcon, { color: Colors.white }]}>{i+1}</Text>
</TouchableOpacity>
</View>
)
}
}
_displayOpenParag(){
if(this.state.open_parag == true){
return (
<View>
<View style={styles.openBox}>
<Text style={{ fontFamily: 'Comfortaa-Bold' }}>PARAGRAPH CONTENT : </Text>
<TextInput multiline={true} numberOfLines={6}
onChangeText={(update_parag_text) => this.setState({update_parag_text})}
value={this.state.update_parag_text}
/>
{ this.RenderFormErrors('update_parag_text') }
</View>
</View>
)
}
}
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={[ AppStyles.bgWhite, {width: '90%', height: '100%'}]}>
<ScrollView scrollEnabled={true}>
</ScrollView>
</View>
<View style={{width: '10%', height: '100%'}}>
{ this._displayParagBtn() }
</View>
</View>
{ this._displayOpenParag() }
</View>
);
}
If you check from my code above, I load the paragraphs data in componentDidMount and set a state. When doing the rendering, I have called the _displayParagBtn() function in order to display the paragraph button. When the button is clicked, it will trigger the openParag function with the paragraph id been passed and that is how the TextInput opened.
From the openParag function, I have called another function to load the paragraph data from database and set the current paragraph in a state so that I can display it to the TextInput when it's opened.
Everything is working fine with passing the parameter and opening the exact data, but when I try to do editing on my TextInput, the data keep on refreshing causing me not be able to edit the existing text. I wonder if it's occured so because of the way I do the fetching and displaying data. I can't figure it out.
