Reputation: 21
I have the following code
import React, { Component } from 'react';
import { Text, View,StyleSheet, Picker } from 'react-native';
export default class App extends Component { constructor(props) {
super(props)
this.state = {
language: '',
firstLanguage: 'java',
secondLanguage: 'js',
} }
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Unstyled: {this.state.language}</Text>
<Picker
style={styles.picker} itemStyle={styles.pickerItem}
selectedValue={this.state.language}
onValueChange={(itemValue) => this.setState({language: itemValue})}
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
</View>
); } }
When the component loads, the value inside the component state for language is empty string, but in the picker, Java
is selected. I want the state value to be set to java
as well. Please help
Upvotes: 2
Views: 4495
Reputation: 31
call a function inside picker Item to set value if it's null or empty like below code:
export default class App extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
this.state = {
language: '',
};
}
setFirstValue (value){
if(this.state.language =='' ||this.state.language == null){
this.setState({ language: value })
}
}
render() {
return (
<View>
<Text>Unstyled: {this.state.language}</Text>
<Picker
selectedValue={this.state.language}
onValueChange={(itemValue) => this.setState({ language: itemValue })}
>
<Picker.Item label="Java" value="java" STF = {this.setFirstValue("java")} />
<Picker.Item label="JavaScript" value="js" />
<Picker.Item label="Python" value="python" />
<Picker.Item label="Haxe" value="haxe" />
</Picker>
</View>
);
}
}
I think maybe you can fix the issue by ref also.
Upvotes: 1