0

I use React Native 0.55.4 and native-base 2.4.4. I want to display a list with pickers.

  <List dataArray={action.dates}
    renderRow={(date, _, rowID) =>
      <ListItem>
        <Text>{rowID} {Moment(date.start).format('MMM Do YY')}: {Moment(date.start).format('hh:mm')} - {Moment(date.end).format('hh:mm')}</Text>
        <Form>
          <Picker
            mode="dropdown"
            style={{ width: 160 }}
            selectedValue={this.state.selected_date[rowID]}
            onValueChange={(value, rowID) => this.onValueChange(value, rowID)}
            //onValueChange={this.onValueChange(rowID).bind(this)}
          >
            <Picker.Item label="-" value="-1" key="-1" />
            <Picker.Item label="YES" value="0" key="0"/>
            <Picker.Item label="NO" value="1" key="1"/>

          </Picker>
        </Form>
      </ListItem>
    }>
  </List>

Here is a function which changes the value of the selected item:

  onValueChange(value, rId) {
    let sd = this.state.selected_date.slice();
    sd[rId] = value;
    this.setState({selected_date: sd});
  }

I keep information about the value of an element of a list in state.selected_date which is an array. I create it in constructor:

 av = Array(action.dates.length).fill("-1");
    this.state = {
      selected_date: av
   };

When clicking in my application on a picker and change its value I see in the console that it works, but it doesn't change (render) in the application.

How can I modify above example to change it in the app?

trojek
  • 3,078
  • 2
  • 29
  • 52

1 Answers1

0

Why do you slice arrays and read/update from them, if you need a single value?

Use a second state attribute and connect with your component:

 state = {..., value: ''}

...handle change as follows:

 onValueChange(value, rId) {
    // do something with your arrays, if necessary...
    let sd = this.state.selected_date.slice();
    sd[rId] = value;
    this.setState({value: value, selected_date: sd});
  }

with this picker prop...

  selectedValue={this.state.value}
Mukeyii
  • 520
  • 3
  • 13
  • I'm not sure if my question is clear but I have, a list of objects and I want to update one element of the list at a time. If I understand you propose to update `this.state.value` which will be the same for all elements of my list. – trojek Dec 17 '18 at 11:28