I have a problem with entering data in the database (Couch / Pouch).
Basically I have a form through which I pass the values entered to a function that performs a put in the database, thus entering the data.
The problem is that if by chance one of these fields from the form is left empty, once the put is executed this field is deleted from the database.
So for example, if I have the FirstName: "NameUser" field in the db, and going to compile the form nothing is entered in the field corresponding to FirstName, the value FirstName and "NameUser" are deleted from the db.
How can I solve this problem? Thank you all.
//.....
.then(response => {
let utente = response.docs[0];
utente.Person.FirstName = this.state.FirstName;
utente.Person.LastName = this.state.LastName;
utente.Person.City = this.state.City;
utente.Person.Address = this.state.Address;
return global.utente.db.localdb().put(utente);
})
.catch(function(err) {
console.log(JSON.stringify(err));
}) }
render() {
return (
<View style={style.container}>
<View style={style.page}>
<KeyboardAwareScrollView>
<View style={style.inputContainer}>
<TextInput
style={style.inputs}
placeholder="Name"
placeholderTextColor="#64c7c0"
keyboardType="default"
underlineColorAndroid="grey"
onChangeText={FirstName =>
this.setState({ FirstName })
}
/>
</View>
<View style={style.inputContainer}>
<TextInput
style={style.inputs}
placeholder="Surname"
placeholderTextColor="#64c7c0"
keyboardType="default"
underlineColorAndroid="grey"
onChangeText={LastName =>
this.setState({ LastName })}
/>
</View>
<View style={style.inputContainer}>
<TextInput
style={style.inputs}
placeholder="City"
placeholderTextColor="#64c7c0"
keyboardType="default"
underlineColorAndroid="grey"
onChangeText={City => this.setState({ City })}
/>
</View>
{/*
<View style={style.inputContainer}>
</View>
*/}
<View style={style.inputContainer}>
<TextInput
style={style.inputs}
placeholder="Address"
placeholderTextColor="#64c7c0"
keyboardType="default"
underlineColorAndroid="grey"
onChangeText={Address => this.setState({ Address })}
/>
<View style={style.footer}>
<TouchableOpacity
style={[style.button, style.buttonOK]}
onPress={() => this.findUtente(this.props.cf)}
>
<Text>Save</Text>
</TouchableOpacity>
Related
I am trying to update my full screen on pressing a button. I have tried updating States but is not working for my case. I don't know if its causing for the async function or not.
This is my states:
const [bNumber, setBNumber] = React.useState('');
const [rollNumWeight, setRollNumWeight] = useState([]);
const [rollNumber, setRollNumber] = useState('');
const [rollWeight, setRollWeight] = useState('');
Bellow is function I am using:
const saveRoll = async () => {
try {
const response = await fetch('someURL', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
roll_num_weight: rollNumWeight,
bNumber: bNumber
})
});
const json = await response.json();
setBNumber('')
setRollNumber('')
setRollWeight('')
setRollNumWeight([])
AlertButton('Rolls Saved Successfully!')
} catch (error) {
console.error(error);
}
}
I am inputting some data on this stage so my states changes from initial state. Then I am pressing SAVE button
This is the button I am calling my function from:
<TouchableOpacity style={styles.button} onPress={saveRoll}>
<Text style={styles.buttonText}>Save</Text>
</TouchableOpacity>
After Pressing the save button it nothing changes. All the states remain the same.
Bellow is my full render code:
<View style={styles.container}>
<ScrollView
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}>
<View style={styles.app}>
<View style={styles.col1}>
<Text>WORKORDER/BATCHNO</Text>
<SelectDropdown
data={batches}
onSelect={(selectedItem) => {
// getData(selectedItem)
setBNumber(selectedItem)
}}
defaultButtonText={'Select Batch NO'}
buttonTextAfterSelection={(selectedItem, index) => {
return selectedItem;
}}
rowTextForSelection={(item, index) => {
return item;
}}
buttonStyle={styles.input}
buttonTextStyle={styles.dropdown1BtnTxtStyle}
renderDropdownIcon={isOpened => {
return <FontAwesome name={isOpened ? 'chevron-up' : 'chevron-down'} color={'#444'} size={18} />;
}}
dropdownIconPosition={'right'}
dropdownStyle={styles.dropdown1DropdownStyle}
rowStyle={styles.dropdown1RowStyle}
rowTextStyle={styles.dropdown1RowTxtStyle}
selectedRowStyle={styles.dropdown1SelectedRowStyle}
search
searchInputStyle={styles.dropdown1searchInputStyleStyle}
searchPlaceHolder={'Search here'}
searchPlaceHolderColor={'darkgrey'}
renderSearchInputLeftIcon={() => {
return <FontAwesome name={'search'} color={'#444'} size={18} />;
}}
/>
</View>
<View pointerEvents="none">
</View>
<View style={styles.row}>
<View style={styles.col1}>
<Text>Roll Number</Text>
<TextInput
placeholder='Roll Number'
keyboardType='numeric'
style={styles.input}
value={rollNumber}
onChangeText={(val) => setRollNumber(val)} />
</View>
<View style={styles.col1}>
<Text>Roll Weight</Text>
<TextInput
placeholder='Roll Weight'
keyboardType='numeric'
style={styles.input}
value={rollWeight}
onChangeText={(val) => setRollWeight(val)} />
</View>
</View>
<Button title=' Add ' onPress={addRoll}></Button>
</View>
<TouchableOpacity style={styles.button} onPress={saveRoll}>
<Text style={styles.buttonText}>Save</Text>
</TouchableOpacity>
<Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
<Row data={tableHead} style={styles.head} textStyle={styles.text}/>
<Rows data={rollNumWeight} textStyle={styles.text}/>
</Table>
</ScrollView>
</View>
);
I am using flatlist for show user input notes in my app. But Flat List is not render any item that i entered. I used static list for testing and it works correctly. but when i enter a text through textinput it is not showing.
const addToDoHandler = () => {
if(userInput == ''){
return;
}
const newTodo = {
id: Math.floor(Math.random() * 1000),
text: userInput,
completed: false,
};
const newTodos = [...todos, newTodo];
setTodos(newTodos);
//clear user input
setUserInput('');
};
const renderItem = ( {item} ) => {
<View style={{backgroundColor:'#6b4d87', marginVertical: 10, flexDirection:'row', alignItems:'center', justifyContent:'space-between', height:60, width:'95%', borderRadius:10 }}>
<View>
<Text style={{color:'black', fontSize:20, fontWeight:'bold'}}>{item.text}</Text>
</View>
<TouchableOpacity onPress={() => deleteHandler(item.id)}>
<TrashIcon size={35} name="trash" style={{color:'#eff9f0'}} />
</TouchableOpacity>
</View>
};
return (
<SafeAreaView style={styles.root}>
<View style={styles.txtInputView}>
<TextInput
value={userInput}
onChangeText={text => setUserInput(text)}
style={styles.textInput}
placeholder={"Enter Your Note..."}
/>
<TouchableOpacity style={styles.addButton} onPress={addToDoHandler}>
<PlusSign size={35} name="add-sharp" style={styles.plusIcon}/>
</TouchableOpacity>
</View>
<View style={{alignItems:'center'}}>
<FlatList
data={todos}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
</SafeAreaView>
);
You need to return the components from renderItem.
Change it to:
const renderItem = ( {item} ) => (
<View style={{backgroundColor:'#6b4d87', marginVertical: 10, flexDirection:'row', alignItems:'center', justifyContent:'space-between', height:60, width:'95%', borderRadius:10 }}>
<View>
<Text style={{color:'black', fontSize:20, fontWeight:'bold'}}>{item.text}</Text>
</View>
<TouchableOpacity onPress={() => deleteHandler(item.id)}>
<TrashIcon size={35} name="trash" style={{color:'#eff9f0'}} />
</TouchableOpacity>
</View>
);
I am trying to call my emailInput and have it show up on my createPassword page, specifically where youremail#email.com is. I have given the two pages below, the email page consisting of a user input and the password page where I want that user input to appear on. I cannot really wrap my head around how to refer to the Input in my onPress. Any insight at all is appreciated more than you know!
Also, can I call two onPress's like that? Or do I need to create two functions and do it that way?
SignUpEmail.js
export default class SignUpEmailPage extends Component {
constructor() {
super();
this.state = {
color1: '#A2A2A2'};}
render() {
return (
<View style={styles.containerMain}>
{/* Email Input */}
<Container style = {styles.emailInput}>
<Form>
<Item floatingLabel >
<Label style={{color:this.state.color1}}>Email Address</Label>
<Input
style={styles.textInput}
autoCorrect={false}
autoCapitalize="none"
onFocus={() => this.setState({color1: '#F7018D'})}
onBlur={() => this.setState({color1: '#A2A2A2'})}
/>
</Item>
</Form>
</Container>
<View style={styles.containerBottom}>
<ContinueButton
onPress = {() => navigation.navigate('CreatePassword', { emailInput: })}
onPress={() => this.props.navigation.navigate('CreatePassword')}
/>
</View>
CreatePassword.js
export default class CreatePasswordPage extends Component {
constructor() {
super();
this.state = {
color1: '#A2A2A2'};}
render() {
return (
<View style={styles.containerMain}>
{/* Password Input */}
<Container style = {styles.passwordInput}>
<Form>
<Item floatingLabel>
<Label style={{color:this.state.color1}}>Password</Label>
<Input
style={styles.textInput}
autoCorrect={false}
autoCapitalize="none"
secureTextEntry={true}
onFocus={() => this.setState({color1: '#F7018D'})}
onBlur={() => this.setState({color1: '#A2A2A2'})}
/>
</Item>
</Form>
</Container>
<View style={styles.containerHeader}>
<Text style={styles.title}>Create a Password</Text>
</View>
<View style={styles.containerCaption}>
<Text style={styles.caption}> Lets create your Password for
</Text>
</View>
<View style={styles.containerCaption2}>
<Text style={styles.caption}> youremail#email.com</Text>
</View>
<View style= {styles.backArrowPlacement}>
<BackArrow
onPress={() => this.props.navigation.navigate('SignUpEmail')}
/>
</View>
<View style={styles.containerBottom}>
<ContinueButton
onPress={() => this.props.navigation.navigate('PhoneVerification')}
/>
</View>
</View>
);
}
}
You can't use navigation.navigate as it needs Hooks implementation in the functional component. You can do is
export default class SignUpEmailPage extends Component {
constructor() {
super();
this.state = {
color1: '#A2A2A2',
inputValue: '', // add state here
};
}
updateInputValue = (evt) => {
this.setState({
inputValue: evt.target.value
});
}
render() {
return (
<Input
value = {this.state.inputValue}
onChange={this.updateInputValue }
/>
<ContinueButton
//onPress = {() => navigation.navigate('CreatePassword', { emailInput: })} // remove this
onPress={() => this.props.navigation.navigate('CreatePassword',{ emailInput: this.state.inputValue })} // use this like
/>
)
}
}
I've got the following class:
export default class DonationFormScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
title: this.props.title,
};
}
state = {
units: '0',
comment: '-'
}
render() {
let institution=this.props.route.params.institution;
let title = this.props.route.params.title;
return (
<View>
<View style={styles.container}>
<Text style={styles.label}>¿Cuántas unidades?</Text>
<TextInput
style={styles.input}
placeholder="Unidades..."
onChangeText={(text) => this.setState({units:text})}
/>
<Text style={styles.label}>¿Algún otro comentario?</Text>
<TextInput
style={styles.input}
placeholder="Comentar..."
onChangeText={(text) => this.setState({comment:text})}
/>
<View style={styles.button}>
<Button color="white" title="Donar"/>
</View>
</View>
</View>
);
}
}
Turns out I'm unable to type inside my textinputs. Whenever I click on them I can get the placeholder to disappear and it seems to let me type but nothing gets written on screen.
You didn't give initial value to your Text Input
<TextInput
value={this.state.units}
style={styles.input}
placeholder="Unidades..."
onChangeText={(text) => this.setState({units:text})}
/>
and the same goes for comment TextInput
<TextInput
value={this.state.comment}
style={styles.input}
placeholder="Comentar..."
onChangeText={(text) => this.setState({comment:text})}
/>
i am very new to this platform , it my 2nd day on this. i trying to learn it by myself by creating simple login , sign up , news feed application . i am able to build login page but while getting values from InputText , it display me error saying "Can not specify both value and Children" , Here i am posting my login.js class
export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: ''
};
}
login = () => {
alert(this.state.username + " " + this.state.password);
}
render() {
return (
<View style={styles.container}>
<Image source={require('../images/hulk.jpg')} style={styles.backgroundimage}>
<View style={styles.content}>
<Image source={require('../images/logo.png')} style={styles.logo}>
</Image>
<View style={styles.inputcontainer}>
<TextInput underLineColorAndroid='transparent' style={styles.input} value={this.state.username} onChangeText={(username) => this.setState({ username })} placeholderText='username' > </TextInput>
<TextInput secureTextEntry={true} underLineColorAndroid='transparent' style={styles.input} value={this.state.password} onChangeText={(password) => this.setState({ password })} placeholderText='password' placeholderTextColor='black'> </TextInput>
</View>
<TouchableOpacity onPress={this.login} style={styles.buttonContainer}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</Image>
</View>
);
}
}
Please let me know where i am going wrong in code
Regards
Can you please try this
export default class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {username: '',password: ''};
}
login = () => {
alert(this.state.username + " " + this.state.password);
}
render() {
return (
<View style={styles.container}>
<Image source={require('../images/hulk.jpg')} style={styles.backgroundimage}>
<View style={styles.content}>
<Image source={require('../images/logo.png')} style={styles.logo}>
</Image>
<View style={styles.inputcontainer}>
<TextInput
underLineColorAndroid='transparent'
style={styles.input}
value={this.state.username}
onChangeText={(text) => this.setState({ username: text })}
placeholderText='username'/>
<TextInput
secureTextEntry={true}
underLineColorAndroid='transparent'
style={styles.input}
value={this.state.password}
onChangeText={(text) => this.setState({ password:text })}
placeholderText='password'
placeholderTextColor='black'/>
</View>
<TouchableOpacity onPress={this.login()} style={styles.buttonContainer}>
<Text style={styles.buttonText}>LOGIN</Text>
</TouchableOpacity>
</View>
</Image>
</View>
);
}