CODEWITHSUNDEEP
javascriptreactjsreact-native
user11726660
user11726660

Reputation: 21

React-native picker default value

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

Answers (1)

Monir Ebrahimi
Monir Ebrahimi

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

Related Questions