How do i set and get the different states and inputs from a flatlist with multiple objects

Question

ok i got this flatlist contained within a flatlist, and the flatlist from inside, contains dropdowns, inputs, and buttons that i need to capture which data i'm getting from them, and of course save the new data based on what i selected, typed in or clicked, i'm not entirely sure how to do this, this is the code for flatlist

                <FlatList
              extraData = {this.state}
              data = {this.state.dataSource}
              renderItem = {({item, index}) => {
                return (
                  <View style={{marginTop: hp('2%')}}>
                    <TouchableOpacity style={{
                      alignSelf: 'center',
                      width: wp('95.7%'),
                      height: hp('10%'),
                      backgroundColor: "#ffffff",
                    }} onPress={() => this.toggleExpanded()}>
                      <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
                        <View style={{flexDirection: 'column', justifyContent: 'center'}}>
                          <Text numberOfLines={2} ellipsizeMode="tail" style={{
                            marginLeft: wp('5%'),
                            width: wp('55%'),//wp('38.2%'), //151
                            //height: hp('2%'), //19
                            fontSize: rfv(16),
                            fontWeight: "500",
                            fontStyle: "normal",
                            textAlign: "left",
                            color: "#707070"
                          }}>{item.Title}</Text>
                          <Text style={{
                            marginLeft: wp('5%'),
                            fontSize: rfv(14),
                            fontWeight: "normal",
                            fontStyle: "normal",
                            textAlign: "left",
                            color: "#c4c4c4"
                          }}>{`ID ${item.Id} - ${item.Cliente}`}</Text>
                        {
                          !item.IsFavorite ?
                          <Text style={{
                            marginLeft: wp('5%'),
                            fontSize: rfv(14),
                            fontWeight: "normal",
                            fontStyle: "italic",
                            textAlign: "left",
                            color: "#c4c4c4"
                          }}>No favorito</Text>
                          : null
                        }
                        </View>
                        <View style={{flexDirection: 'column', justifyContent: 'center'}}>
                          <View style={{flexDirection: 'row', marginRight: wp('3.4%')}}>
                            <Text style={{
                              fontSize: rfv(18),
                              fontWeight: "300",
                              fontStyle: "normal",
                              textAlign: "right",
                              color: "#707070"}}>{`${0}h`}</Text>
                            <Image style={{marginTop: hp('1%'), marginLeft: wp('3.7%')}} source={this.state.isCollapsed ? Images.expandible : Images.collapsible}/>
                          </View>
                        </View>
                      </View>
                    </TouchableOpacity>
                    <Collapsible style={{
                      alignSelf: 'center',
                      width: wp('95.7%'),
                      backgroundColor: "#ffffff",}} collapsed={this.state.isCollapsed}>

                    <FlatList
                      //extraData = {this.state}
                      data = {item.ListReportHistoryResponse}//{DataManager.FavoriteList[moment(this.state.selectedDate).format('YYYY-MM-DD')]}
                      renderItem = {({ item, index }) => {
                        return (
                          <View>
                          <View style={{flexDirection: 'row'}}>
                            <Text style={{
                              marginLeft: wp('5%'),
                              fontSize: rfv(14),
                              fontWeight: "normal",
                              fontStyle: "normal",
                              textAlign: "left",
                              color: "#717171"
                            }}>Etapa</Text>
                            <Text style={{
                              marginLeft: wp('42.5%'),
                              fontSize: rfv(14),
                              fontWeight: "normal",
                              fontStyle: "normal",
                              textAlign: "left",
                              color: "#717171"
                            }}>Horas</Text>
                          </View>
                          <View style={{flexDirection: 'row'}}>
                            <ModalDropdown
                              adjustFrame={style => {
                                style.top =(Platform.OS === 'ios' ? style.top : style.top - StatusBar.currentHeight);
                                return style;
                              }}
                              dropdownTextStyle={styles.dropdownTextStyle}
                              dropdownTextHighlightStyle={styles.dropdownTextHighlightStyle}
                              dropdownStyle={styles.dropdownStageStyle}
                              defaultValue={item.Etapa}
                              style={styles.dropStageStyle}
                              textStyle={{
                                padding: 0,
                                margin: 0,
                                fontSize: rfv(16),
                                paddingVertical: hp('1.2%'),
                                fontWeight: 'normal',
                                fontStyle: 'normal',
                                textAlign: 'left',
                                color: item.Etapa /*item.ListReportHistoryResponse[index2].Etapa*/ != 'Selecciona una etapa' ? '#1a1a1a' : '#c4c4c4',
                              }}
                              //onSelect={(index, value) => this.setState({SeleccionClientes: value})}
                              //options={Object.keys(this.state.items)}
                              onSelect={(index, value) => this.setState({SeleccionClientes: value})}
                              options={DataManager.ListEtapa}
                            />
                            <View style={styles.InputContainerHours}>
                              <Text style={styles.InputTextHours}>{item.HorasTrabajadas}</Text>
                            </View>
                            <TouchableOpacity style={{marginTop: hp('0.5%'), marginLeft: wp('5.5%')}} onPress={() => this.props.onSubstract}>
                              <Image source={Images.menos_hora}/>
                            </TouchableOpacity>
                            <TouchableOpacity style={{marginTop: hp('0.5%'), marginLeft: wp('2%')}} onPress={() => this.props.onAdd}>
                              <Image source={Images.mas_hora}/>
                            </TouchableOpacity>
                          </View>
                          <Text style={{
                            fontSize: rfv(14),
                            marginLeft: wp('5%'),
                            fontWeight: "normal",
                            fontStyle: "normal",
                            textAlign: "left",
                            color: "#717171"
                          }}>Observaciones</Text>
                          <Input
                            autoCapitalize="none"
                            maxLength={100}
                            inputContainerStyle={styles.InputContainerComentarioOnBlur}
                            containerStyle={styles.InputComentario}
                            inputStyle={styles.InputTextHoursRInput}
                            placeholderTextColor={'#c4c4c4'}
                            placeholder="(Opcional)"
                            onChangeText={value => this.setState({})}
                          />
                          <TouchableOpacity style={{alignItems: 'flex-end', alignSelf: 'flex-end'}}>
                            <Text style={{
                              marginRight: wp('3.4%'),
                              marginBottom: hp('3%'),
                              fontSize: rfv(14),
                              fontWeight: "normal",
                              fontStyle: "normal",
                              textAlign: "left",
                              color: "#1062cc"
                            }}>Agregar etapa</Text>
                          </TouchableOpacity>
                        </View>
                        )}}/>
                        </Collapsible>
                        </View>
                )
              }}
            />

EDIT: updated with screenshot of the object displayed in flatlist, i still need help getting this to work

<View style={styles.InputContainerHours}>
<Text style={styles.InputTextHours}>{item.HorasTrabajadas}</Text>
</View>
<TouchableOpacity style={{marginTop: hp('0.5%'), marginLeft: wp('5.5%')}} onPress={() => this.props.onSubstract}>
<Image source={Images.menos_hora}/>
</TouchableOpacity>
<TouchableOpacity style={{marginTop: hp('0.5%'), marginLeft: wp('2%')}} onPress={() => this.props.onAdd}>
<Image source={Images.mas_hora}/>
</TouchableOpacity>

the onadd is supposed function that adds to item.HorasTrabajadas, 0.5 in addition to the current value, and the onsubstract is the same but substracts to the current value

and here is the object

edit 2: what if the api contains an object with data saved already, how do i edit that new data?

edit 3: i added a github project with the 3 most important parts of this project, https://github.com/Vasault/HourReg/tree/develop contains 3 files, the most important one HourRegistration.tsx

edit 4: unable to change data that already come from api

Waheed Akhtar · Answer 1 · 2020-06-03T21:00:52.397

2

You can use the index of your array to identify the selected item, and when you have an index of every time you can update the item on every action according to your need.

Let suppose you have 10 items and on every item, you have to update the state you can get the item and index of that row and can update the state easily.

Here is a simple example that can clear your confusion. And here is a snack with a working example

https://snack.expo.io/@waheed25/radarada

import React from 'react';
import { SafeAreaView, View, TextInput, FlatList, StyleSheet, Text } from 'react-native';
import Constants from 'expo-constants';

const DATA = [
  {
    id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
    title: 'First Item',
  },
  {
    id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
    title: 'Second Item',
  },
  {
    id: '58694a0f-3da1-471f-bd96-145571e29d72',
    title: 'Third Item',
  },
];

export default class  App extends React.Component {

  state={
    observacionesInput: []
  }
   onTextObservacionesChange = (text, index) => {
    var { observacionesInput } = this.state
    let myArray = observacionesInput
        myArray[index] = text
    this.setState({observacionesInput: myArray });
  }
  toggleExpanded = () => {
    this.setState({ isCollapsed: !this.state.isCollapsed });  
  };
  render(){
    console.log('state', this.state)
  return (
    <SafeAreaView>
    <Text>Testing</Text>
      <FlatList
        data={DATA}
        renderItem={({ item, index }) => { 
          return(
            <View style={{  marginTop: 20}}>
              <TextInput
               style={{borderColor: 'gray', borderWidth: 1, height: 50,}}
                autoCapitalize="none"
                maxLength={100}
                placeholderTextColor={'#c4c4c4'}
                placeholder="(Opcional)"
                onChangeText={value => this.onTextObservacionesChange(value, index)}
              />
            </View>
          )
        }}
      />
    </SafeAreaView>
  );
  }
}

edited Jun 03 '20 at 21:00

answered Jun 03 '20 at 18:46

Waheed Akhtar

3,110
1
16
30

what about the handling of the states for those specific items?? or the dropdown, or the onchangetext? i understood how to get the specific item for each element in the flat list, but can you elaborate more please? – Nicolas Silva Jun 03 '20 at 19:13
These will have a separate state and will update upon user action, You should keep in mind you need to update the state of every component(TextInput, Picker, etc), So you have to identify the index which index in updated and then update that specific index in your state. – Waheed Akhtar Jun 03 '20 at 19:17
I also added an example for Textinput in my answer. – Waheed Akhtar Jun 03 '20 at 19:25
onTextChange=(text, index)=>{ this.setState({myTextInput[i]: text) } you're only passing the text, also, shouldn't the i be the index in this case? – Nicolas Silva Jun 03 '20 at 19:29
Ahhh sorry, yes it's index. – Waheed Akhtar Jun 03 '20 at 19:31
i'm still getting error, this is one of my inputs functions, onTextObservacionesChange=(text, index)=>{ var { observacionesInput } = this.state; this.setState({observacionesInput[i]: text}); } – Nicolas Silva Jun 03 '20 at 19:35
can you help me in a chat? it'll be faster i think – Nicolas Silva Jun 03 '20 at 19:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215258/discussion-between-waheed-akhtar-and-nicolas-silva). – Waheed Akhtar Jun 03 '20 at 19:38
sorry 've been working on a different part of the project, i'll be testing this in a moment – Nicolas Silva Jun 03 '20 at 22:20
ok i tested your solution, on the dropdown works flawless, but the onchangetext, i'm unable to see which of the inputs is actually changing text, since unlike the dropdown, i'm unable to see the index, also, can you help me with the collapse/expandable? when i press it, every block is opening instead of the one i pressed on – Nicolas Silva Jun 03 '20 at 23:00
I added an example for textinput and you can see in logs that state changes. – Waheed Akhtar Jun 04 '20 at 00:16
yes, but you CAN'T tell which of the items you changing the text, also, i tested your solution for the dropdown, and is not working – Nicolas Silva Jun 04 '20 at 00:34

Muhammad Numan · Answer 2 · 2020-06-06T09:13:02.447

you can make dynamic state by append parentIndex and childIndex to state to uniquely identify of item of child flatlist

you can use onChangeValue for save data into newDataSave object and getDataFromNewSave for get data from newDataSave

Note: you all saving data is saving in newDataSave object. you can console to check it and save into database.

 onChangeValue = (key, value) => {
    this.setState((prevState) => {
      return {
        newDataSave: {
          ...prevState.newDataSave,
          [key]: value,
        },
      };
    });
  };

  getDataFromNewSave = (key) => {
    try {
      return this.state.newDataSave[key];
    } catch (error) {
      return "";
    }
  };

<Input
                            value={this.getDataFromNewSave(
                              `input${parentIndex}${childIndex}`
                            )}
                            autoCapitalize="none"
                            maxLength={100}
                            inputContainerStyle={
                              styles.InputContainerComentarioOnBlur
                            }
                            containerStyle={styles.InputComentario}
                            inputStyle={styles.InputTextHoursRInput}
                            placeholderTextColor={"#c4c4c4"}
                            placeholder="(Opcional)"
                            onChangeText={(value) => {
                              this.onChangeValue(
                                `input${parentIndex}${childIndex}`,
                                value
                              );
                            }}
                          />

Full Code:

import React, { Component } from "react";
import {
  Text,
  StyleSheet,
  View,
  FlatList,
  TouchableOpacity,
  Image,
  TextInput,
} from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import Collapsible from "react-native-collapsible";
import ModalDropdown from "react-native-modal-dropdown";

const Input = TextInput;
const rfv = (value) => {
  return value;
};

const DataManager = {
  ListEtapa: ["a", "b", "c"],
};

const Images = {
  collapsed: require("./assets/icons/app-icon.png"),
  expandible: require("./assets/icons/app-icon.png"),
};

export default class App extends Component {
  state = {
    isCollapsed: false,
    dataSource: [
      {
        Id: "1",
        Title: "abc1",
        Cliente: "abc1",
        IsFavorite: false,
        ListReportHistoryResponse: [
          { Etapa: "abc1", HorasTrabajadas: "abcabc1" },
          { Etapa: "cde1", HorasTrabajadas: "cdecde1" },
        ],
      },
      {
        Id: "2",
        Title: "abc2",
        Cliente: "abc2",
        IsFavorite: false,
        ListReportHistoryResponse: [
          { Etapa: "abc2", HorasTrabajadas: "abcabc2" },
          { Etapa: "cde2", HorasTrabajadas: "cdecde2" },
        ],
      },
    ],
    newDataSave: {},
  };

  onChangeValue = (key, value) => {
    this.setState((prevState) => {
      return {
        newDataSave: {
          ...prevState.newDataSave,
          [key]: value,
        },
      };
    });
  };

  getDataFromNewSave = (key) => {
    try {
      return this.state.newDataSave[key];
    } catch (error) {
      return "";
    }
  };

  render() {
    return (
      <View>
        <FlatList
          extraData={this.state}
          data={this.state.dataSource}
          renderItem={({ item, index: parentIndex }) => {
            return (
              <View style={{ marginTop: hp("2%") }}>
                <TouchableOpacity
                  style={{
                    alignSelf: "center",
                    width: wp("95.7%"),
                    height: hp("10%"),
                    backgroundColor: "#ffffff",
                  }}
                  onPress={() => this.toggleExpanded()}
                >
                  <View
                    style={{
                      flex: 1,
                      flexDirection: "row",
                      justifyContent: "space-between",
                    }}
                  >
                    <View
                      style={{
                        flexDirection: "column",
                        justifyContent: "center",
                      }}
                    >
                      <Text
                        numberOfLines={2}
                        ellipsizeMode="tail"
                        style={{
                          marginLeft: wp("5%"),
                          width: wp("55%"), //wp('38.2%'), //151
                          //height: hp('2%'), //19
                          fontSize: rfv(16),
                          fontWeight: "500",
                          fontStyle: "normal",
                          textAlign: "left",
                          color: "#707070",
                        }}
                      >
                        {item.Title}
                      </Text>
                      <Text
                        style={{
                          marginLeft: wp("5%"),
                          fontSize: rfv(14),
                          fontWeight: "normal",
                          fontStyle: "normal",
                          textAlign: "left",
                          color: "#c4c4c4",
                        }}
                      >{`ID ${item.Id} - ${item.Cliente}`}</Text>
                      {!item.IsFavorite ? (
                        <Text
                          style={{
                            marginLeft: wp("5%"),
                            fontSize: rfv(14),
                            fontWeight: "normal",
                            fontStyle: "italic",
                            textAlign: "left",
                            color: "#c4c4c4",
                          }}
                        >
                          No favorito
                        </Text>
                      ) : null}
                    </View>
                    <View
                      style={{
                        flexDirection: "column",
                        justifyContent: "center",
                      }}
                    >
                      <View
                        style={{
                          flexDirection: "row",
                          marginRight: wp("3.4%"),
                        }}
                      >
                        <Text
                          style={{
                            fontSize: rfv(18),
                            fontWeight: "300",
                            fontStyle: "normal",
                            textAlign: "right",
                            color: "#707070",
                          }}
                        >{`${0}h`}</Text>
                        <Image
                          style={{
                            marginTop: hp("1%"),
                            marginLeft: wp("3.7%"),
                          }}
                          source={
                            this.state.isCollapsed
                              ? Images.expandible
                              : Images.collapsible
                          }
                        />
                      </View>
                    </View>
                  </View>
                </TouchableOpacity>
                <Collapsible
                  style={{
                    alignSelf: "center",
                    width: wp("95.7%"),
                    backgroundColor: "#ffffff",
                  }}
                  collapsed={this.state.isCollapsed}
                >
                  <FlatList
                    //extraData = {this.state}
                    data={item.ListReportHistoryResponse} //{DataManager.FavoriteList[moment(this.state.selectedDate).format('YYYY-MM-DD')]}
                    renderItem={({ item, index: childIndex }) => {
                      return (
                        <View>
                          <View style={{ flexDirection: "row" }}>
                            <Text
                              style={{
                                marginLeft: wp("5%"),
                                fontSize: rfv(14),
                                fontWeight: "normal",
                                fontStyle: "normal",
                                textAlign: "left",
                                color: "#717171",
                              }}
                            >
                              Etapa
                            </Text>
                            <Text
                              style={{
                                marginLeft: wp("42.5%"),
                                fontSize: rfv(14),
                                fontWeight: "normal",
                                fontStyle: "normal",
                                textAlign: "left",
                                color: "#717171",
                              }}
                            >
                              Horas
                            </Text>
                          </View>
                          <View style={{ flexDirection: "row" }}>
                            <ModalDropdown
                              adjustFrame={(style) => {
                                style.top =
                                  Platform.OS === "ios"
                                    ? style.top
                                    : style.top - StatusBar.currentHeight;
                                return style;
                              }}
                              dropdownTextStyle={styles.dropdownTextStyle}
                              dropdownTextHighlightStyle={
                                styles.dropdownTextHighlightStyle
                              }
                              dropdownStyle={styles.dropdownStageStyle}
                              defaultValue={this.getDataFromNewSave(
                                `SeleccionClientes${parentIndex}${childIndex}`
                              )}
                              style={styles.dropStageStyle}
                              textStyle={{
                                padding: 0,
                                margin: 0,
                                fontSize: rfv(16),
                                paddingVertical: hp("1.2%"),
                                fontWeight: "normal",
                                fontStyle: "normal",
                                textAlign: "left",
                                color:
                                  item.Etapa /*item.ListReportHistoryResponse[index2].Etapa*/ !=
                                  "Selecciona una etapa"
                                    ? "#1a1a1a"
                                    : "#c4c4c4",
                              }}
                              //onSelect={(index, value) => this.setState({SeleccionClientes: value})}
                              //options={Object.keys(this.state.items)}
                              onSelect={(i, value) =>
                                // this.setState({ SeleccionClientes: value })
                                this.onChangeValue(
                                  `SeleccionClientes${parentIndex}${childIndex}`,
                                  value
                                )
                              }
                              options={DataManager.ListEtapa}
                            />
                            <View style={styles.InputContainerHours}>
                              <Text style={styles.InputTextHours}>
                                {item.HorasTrabajadas}
                              </Text>
                            </View>
                            <TouchableOpacity
                              style={{
                                marginTop: hp("0.5%"),
                                marginLeft: wp("5.5%"),
                              }}
                              onPress={() => this.props.onSubstract}
                            >
                              <Image source={Images.menos_hora} />
                            </TouchableOpacity>
                            <TouchableOpacity
                              style={{
                                marginTop: hp("0.5%"),
                                marginLeft: wp("2%"),
                              }}
                              onPress={() => this.props.onAdd}
                            >
                              <Image source={Images.mas_hora} />
                            </TouchableOpacity>
                          </View>
                          <Text
                            style={{
                              fontSize: rfv(14),
                              marginLeft: wp("5%"),
                              fontWeight: "normal",
                              fontStyle: "normal",
                              textAlign: "left",
                              color: "#717171",
                            }}
                          >
                            Observaciones
                          </Text>
                          <Input
                            value={this.getDataFromNewSave(
                              `input${parentIndex}${childIndex}`
                            )}
                            autoCapitalize="none"
                            maxLength={100}
                            inputContainerStyle={
                              styles.InputContainerComentarioOnBlur
                            }
                            containerStyle={styles.InputComentario}
                            inputStyle={styles.InputTextHoursRInput}
                            placeholderTextColor={"#c4c4c4"}
                            placeholder="(Opcional)"
                            onChangeText={(value) => {
                              this.onChangeValue(
                                `input${parentIndex}${childIndex}`,
                                value
                              );
                            }}
                          />
                          <TouchableOpacity
                            style={{
                              alignItems: "flex-end",
                              alignSelf: "flex-end",
                            }}
                          >
                            <Text
                              style={{
                                marginRight: wp("3.4%"),
                                marginBottom: hp("3%"),
                                fontSize: rfv(14),
                                fontWeight: "normal",
                                fontStyle: "normal",
                                textAlign: "left",
                                color: "#1062cc",
                              }}
                            >
                              Agregar etapa
                            </Text>
                          </TouchableOpacity>
                        </View>
                      );
                    }}
                  />
                </Collapsible>
              </View>
            );
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({});

this is not changing the data in realtime, i'm unable to type on the input without the component clearing my text, is certainly saving the data on the newdatasave — Nicolas Silva, Jun 06 '20 at 04:02
@NicolasSilva can you give me contact detail so I can fix your problem on Teamviewer at here it is difficult to understand your full code flow — Muhammad Numan, Jun 06 '20 at 09:14
i need answers related to edit an already filled input, and the addhour, substracthour — Nicolas Silva, Jun 08 '20 at 17:15
sure, i'll try to post everything, but keep in mind stackoverflow only allows a certain amount of lines of code — Nicolas Silva, Jun 08 '20 at 17:49
ok i added a github which contains the entire screen, and i added a json file which contains what looks like the api object, keep in mind that object can change depending on the data i'm retrieving, if contains or not data on Observacion, Etapa or Horas — Nicolas Silva, Jun 08 '20 at 18:03
I think you have made private repo. you can add my GitHub username as a contributor nomi9995 — Muhammad Numan, Jun 08 '20 at 18:26
ObjectFromAPI this file has raw data not json data. you should copy log as json data like https://stackoverflow.com/a/41032618/8079868 — Muhammad Numan, Jun 08 '20 at 18:41
my bad, i added the style for the entire hourregistration screen, and i changed the json file with the stringify one — Nicolas Silva, Jun 08 '20 at 19:09
would be truly helpful, if there is a way to clone the entire object from api, and edit so that we can use the same object and compare which items were edited — Nicolas Silva, Jun 08 '20 at 19:50
i think i should be try on teamviewer because there is other code flow issue on my side. — Muhammad Numan, Jun 08 '20 at 19:53
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/215535/discussion-between-muhammad-numan-and-nicolas-silva). — Muhammad Numan, Jun 08 '20 at 19:57

score 1 · Accepted Answer · answered Jun 09 '20 at 18:55

SOLVED, in a much better and easier way

on every input, dropdown, etc. set a function and pass 3 parameters onChangeText={value => this.onChangeTextObservaciones(parentIndex, childIndex, value)

parentIndex (the one from outside flatlist), childIndex (the one from inside), and the value you're editing (blank or not)

const onChangeTextObservaciones = (indexOutside, indexInside, value) => {
    this.dataList[indexOutside].ListReportHistoryResponse[indexInside].Title = value;
    this.setState({displayDay: this.dataList});
}

change the specific value from the specific element from that object, and change it with the new value, and lastly change the whole new object with the new value.

a friend of mine realize this

How do i set and get the different states and inputs from a flatlist with multiple objects

3 Answers3

Full Code: