Bind picker and put its own value

Question

Hello I'm new in react native. I use native-base. I make an mobile app and I need to make a reservation page. To do this I need to create two Picker and put in there the current day and the next for first .

An hour between 7am and 19pm in the second. The first value of the picker need to be the current hour if current hour it is 7 or more.

Two Picker with current date and next for the first and hour of the day for the second

The value in my picker is my table index, I don't understand because it works in javascript console. See the code:

 constructor (){
    super();

    this.state = {
        date: '',
        surface: '',
        start: '',
    };
}

valueChangeDate(value: String){
    this.setState({
        date: value
    });
}

valueChangeStart(value: String){
    this.setState({
        start: value
    });
}

In render:

var hours = [];
    let today = new Date();
    let hour = ('0'+today.getHours()).slice(-2);
    for(hour<7 ? hour=7 : hour; hour<19; hour++){
        hours.push(hour);
        // console.log(hours[hour]);
        console.log(hour);
    }

In return :

    <Picker
        note
        iosHeader={"Select one"}
        mode={"dropdown"}
        style={{width: 175}}
        selectedValue={this.state.date}
        onValueChange={this.valueChangeDate.bind(this)}>
        <Item label={"today"} value={"today"}/>
        <Item label={"tomorrow"} value={"tomorrow"}/>
    </Picker>

    <Picker
        note
        inlineLabel={true}
        mode={"dropdown"}
        style={{width: 175}}
        selectedValue={this.state.start}
        onValueChange={this.valueChangeStart.bind(this)}>
        {Object.keys(hours).map((key) => {
             return (
                 <Item label={key} value={hours[key]}/>
             )
         })}
     </Picker>

I didn't bind yet the two picker, I don't really now how to do. The result of console.log is the good current hour until 18 but not what is display in the picker.

I'm not sure to explains my problem correctly but I'm stuck since a long time and I still have no idea of solution.

Answer 1

I maybe misunderstood your question but here's my answer.

You are displaying your key index as label in your picker : label={key}, try label={hours[key]}.

Make sure you are giving this label a String value : hours.push(hour.toString())

I also suggest you to populate your hours array when mounting component, not in render() method (performance)

Here's a complete working code :

import React, { Component } from 'react';
import { Text, View, StyleSheet, Picker } from 'react-native';

export default class App extends Component {
  constructor (){
    super();

    this.state = {
        date: '',
        surface: '',
        start: '',
        hours: [],
    };
    this.valueChangeDate = this.valueChangeDate.bind(this);
    this.valueChangeStart = this.valueChangeStart.bind(this);
}
componentWillMount() {
  const hours = [];
  const today = new Date();
  let hour = ('0'+today.getHours()).slice(-2);
  for(hour<7 ? hour=7 : hour; hour<19; hour++){
        hours.push(hour.toString());
    }
    this.setState({
      hours
    });
}

valueChangeDate(value: String){
    this.setState({
        date: value
    });
}

valueChangeStart(value: String){
    this.setState({
        start: value
    });
}
  render() {
    return (
      <View style={styles.container}>
       <Picker
        note
        iosHeader={"Select one"}
        mode={"dropdown"}
        style={{width: 175}}
        selectedValue={this.state.date}
        onValueChange={this.valueChangeDate}>
        <Picker.Item label={"today"} value={"today"}/>
        <Picker.Item label={"tomorrow"} value={"tomorrow"}/>
    </Picker>

    <Picker
        note
        inlineLabel={true}
        mode={"dropdown"}
        style={{width: 175}}
        selectedValue={this.state.start}
        onValueChange={this.valueChangeStart}>
        {this.state.hours.map((hourItem) => {
             return (
                 <Picker.Item key={hourItem} label={hourItem} value={hourItem}/>
             )
         })}
     </Picker>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I changed Object.keys(hours).map((key) to this.state.hours.map((hourItem) because you just need the value of items not their index key.

I populated hours in componentWillMount then stored it in state (you can do it at each render but it seems unnecessary)