trying to get a nested array work with react native flat list

Question

so i got this object that i pass as data to my react native flatlist

<FlatList
  extraData = {this.state}
  data = {this.state.data_n1}>
  renderItem = {({item, index}) => {
    this.state.data_n2.forEach(aux => {
      if(item.id == aux.id) {
        return(<View><Text>Display first stuff</Text></View>);
      } else {
        return(<View><Text>Display second stuff</Text></View>);
      }
    }
  }
/>

the whole idea is compare both objects, if the data_n2 contains the same id from the data_n1, the display the data from the data_n2, if not, just display from data_n1, problem is, i'm displaying this whenever i click on a calendar strip, so if i click on day june 1st, that day should display data_n2, if i click on day june 2nd, THAT one should display the data_n1.

does this work with flatlist or virtualizedlist (if i had to swap), or i need to render a flatlist for each data?

Edit: tested hao wu answer, but got this

Edit n2: i'll post the code, but keep in mind data_n1 is this.state.listaImputacionDia and this.state.listaImputacionDia is data_n2

this is the calendar strip code

<CalendarStrip
  calendarHeaderStyle={{
    fontSize: rfv(18),
    fontWeight: "normal",
    fontStyle: "normal",
    letterSpacing: 0,
    textAlign: "left",
    color: "#707070",
    paddingBottom: hp('4.5%')
  }}
  selectedDate={this.state.selectedDate}
  onDateSelected={async (date) => {
    await HoursReportHistoryBusiness.GetInstance().getListHoursReportRequest();
    this.setState({ selectedDate: moment(date).format('YYYY-MM-DD') });
    this.setViewHourHistory();
    console.log(this.state.listaImputacionDia);
  }}
  minDate={moment().subtract(3, 'days')}
  maxDate={moment().add(3,'days')}
  startingDate={moment().subtract(3, 'days')}
  useIsoWeekday={false}
  style={{paddingTop: hp('1.5%'), paddingBottom: hp('2.7%'), backgroundColor: '#ffffff'}}
  highlightDateNameStyle={{color: '#1062cc'}}
  highlightDateNumberStyle={{color: '#1062cc'}}
  disabledDateNumberStyle={{color: '#f21927'}}
  disabledDateNameStyle={{color: '#f21927'}}
  customDatesStyles={this.customDatesStyle}
  dateNameStyle={{color: '#c4c4c4'}}
  dateNumberStyle={{color: '#c4c4c4'}}
  disabledDateOpacity={1}
/>

this is the flatlist

<FlatList
  extraData={this.state.listaImputacionDia}
  data={this.state.dataSource}//{DataManager.FavoriteList[moment(this.state.selectedDate).format('YYYY-MM-DD')]}
  renderItem={({ item, index }) => {
    if (this.state.listaImputacionDia.length != 0) {
      const found = this.state.listaImputacionDia.filter(aux => item.id == aux.IdProyecto);
      //this.state.listaImputacionDia.forEach(aux => {
      if (found/*item.id == aux.IdProyecto*/) {
        console.log('la wea' + found);
        return (
          <View style={{ marginTop: hp('2%') }}>
            <TouchableOpacity style={} onPress={() => this.toggleExpanded()}>
              <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
                <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
                  <Text numberOfLines={2} ellipsizeMode="tail" style={}>{found.Title}</Text>
                  <Text style={}>{`ID ${found.Id} - ${found.Cliente}`}</Text>
                  {
                    !found.fav ?
                      <Text style={}>No favorito</Text>
                      : null
                  }
                </View>
                <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
                  <View style={{ flexDirection: 'row', marginRight: wp('3.4%') }}>
                    <Text style={}>{`${found.HorasTrabajadas}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}>
              <View>
                <View style={{ flexDirection: 'row' }}>
                  <Text style={}>Etapa</Text>
                  <Text style={}>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={'Seleccionar'}
                    style={styles.dropStageStyle}
                    textStyle={{
                      padding: 0,
                      margin: 0,
                      fontSize: rfv(16),
                      paddingVertical: hp('1.2%'),
                      fontWeight: 'normal',
                      fontStyle: 'normal',
                      textAlign: 'left',
                      color: found.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}>{found.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={}>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={}>Agregar etapa</Text>
                </TouchableOpacity>
              </View>
            </Collapsible>
          </View>
        )
      }
      else {
        console.log('no encontro un favorito');
        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={} >{found.title}</Text>
                  <Text style={}>{`ID ${found.id} - ${found.cliente}`}</Text>
                  {
                    !item.fav ?
                      <Text style={}>No favorito</Text>
                      : null
                  }
                </View>
                <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
                  <View style={{ flexDirection: 'row', marginRight: wp('3.4%') }}>
                    <Text style={}>{`${20}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}>
              <View>
                <View style={{ flexDirection: 'row' }}>
                  <Text style={}>Etapa</Text>
                  <Text style={}>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={'Seleccionar'}
                    style={styles.dropStageStyle}
                    textStyle={}
                    //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}>{found.horas}</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={}>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={}>Agregar etapa</Text>
                </TouchableOpacity>
              </View>
            </Collapsible>
          </View>
        );
      }
      //})
    }
    else {
      console.log('imputacion por dia esta vacio');
      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={}>{item.title}</Text>
                <Text style={}>{`ID ${item.id} - ${item.cliente}`}</Text>
                {
                  !item.fav ?
                    <Text style={}>No favorito</Text>
                    : null
                }
              </View>
              <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
                <View style={{ flexDirection: 'row', marginRight: wp('3.4%') }}>
                  <Text style={}>{`${10}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}>
            <View>
              <View style={{ flexDirection: 'row' }}>
                <Text style={}>Etapa</Text>
                <Text style={}>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={'Seleccionar'}
                  style={styles.dropStageStyle}
                  textStyle={}
                  //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.horas}</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={}>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={}>Agregar etapa</Text>
              </TouchableOpacity>
            </View>
          </Collapsible>
        </View>
      );
    }
  }}
/>

forEach always returns undefined, you need to use map

Code Maniac
– Code Maniac

2020-06-01 03:22:42 +00:00
Commented Jun 1, 2020 at 3:22 — Code Maniac
– Code Maniac, Commented Jun 1, 2020 at 3:22
really? my friend got a return working with foreach

Nicolas Silva
– Nicolas Silva

2020-06-01 03:25:39 +00:00
Commented Jun 1, 2020 at 3:25 — Nicolas Silva
– Nicolas Silva, Commented Jun 1, 2020 at 3:25
Not possible forEach MDN read the return value section here

Code Maniac
– Code Maniac

2020-06-01 03:28:10 +00:00
Commented Jun 1, 2020 at 3:28 — Code Maniac
– Code Maniac, Commented Jun 1, 2020 at 3:28

Hao Wu · Accepted Answer · 2020-06-01 03:35:40Z

1

forEach only returns undefined, no matter what you return in the function.

You could find the element first, and then render it conditionally:

<FlatList
    extraData={this.state.data_n2}
    data={this.state.data_n1}>
    renderItem = {({ item, index }) => {
        const found = this.state.data_n2.find(aux => item.id == aux.id);
        if (found) {
            return (<View><Text>Display first stuff: {found.id}</Text></View>);
        } else {
            return (<View><Text>Display second stuff: {item.id}</Text></View>);
        }
    }}
/>

If there are possibly multiple matches:

<FlatList
    extraData={this.state}
    data={this.state.data_n1}>
    renderItem = {({ item, index }) => {
        const found = this.state.data_n2.filter(aux => item.id == aux.id);
        if (found.length > 0) {
            return (
                <View>{
                    found.map(e => (<View><Text>Display first stuff: {e.id}</Text></View>))
                }</View>
            );
        } else {
            return (<View><Text>Display second stuff</Text></View>);
        }
    }}
/>

edited Jun 1, 2020 at 3:35

answered Jun 1, 2020 at 3:25

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Code Maniac Over a year ago

find will return only first matching element if there's any, you need to use map, as op want to show all the items in list

Hao Wu Over a year ago

renderItem is already an iterate function and it supposed to return only one element, not sure if it's nessesary though, but good call, I'll add it as a reference

Nicolas Silva Over a year ago

getting undefined for each element from found

Guruparan Giritharan Over a year ago

@NicolasSilva can you share the code for the actual render ?

Nicolas Silva Over a year ago

i'll do my best, but is A LOT

|

Collectives™ on Stack Overflow

trying to get a nested array work with react native flat list

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related