renderCard problem

[cokealmonacid]

I have created a component that encapsulates the swiper and its functionalities, currently I bring a list of elements from the backend and it shows them correctly, then when trying to bring a completely different list from the backend the renderCard method returns undefined.

Stack.js

  render() {
    const {cars, next, current, token, notLogged} = this.props;
    let actualIndex = 0;
    return (
      <View style={styles.container}>
        <Swiper
          key={cars.length}
          ref={(swiper) => {
            this.swiper = swiper;
          }}
          animateCardOpacity
          cards={cars}
          renderCard={(card) => {
            actualIndex = card ? card.id : actualIndex;
              return (
                <CarDetail car={card}>
                  <User user={card.user} token={token} notLogged={notLogged} />
                </CarDetail>
              );
          }}
          backgroundColor={Colors.white}
          onSwipedAll={() => next()}
          cardVerticalMargin={0}
          cardHorizontalMargin={0}
          verticalSwipe={false}
          cardIndex={current}
          stackSize={2}
          swipeAnimationDuration={700}
          swipeBackCard
          onSwiped={() => this._onFinishSwipe()}
        />
      </View>
    );
  }

Home.js

  _renderContent = (list, apiStatus, current, token, quick) => {
    const length = list.length;
    if (length && apiStatus && apiStatus.success) {
      return (
        <Stack
          cars={list}
          next={quick ? this._fetchQuickSearchList : this._fetchListCars}
          current={current}
          token={token}
          notLogged={this._notLogged}
        />
      );
    } else if (!length && apiStatus && apiStatus.success) {
      return <Empty refresh comeback={() => this._comeback()} />;
    } else {
      return null;
    }
  };

  render() {
    const {
      apiRequest,
      showList: {carsList, firstTime},
      quickSearch: {quickSearchList},
      token,
    } = this.props;
    const apiStatus = apiRequest[requestId.SHOW_CARS];
    const {quick} = this.state;
    let current = carsList.length - 10;
    const list = carsList.length ? carsList : quickSearchList;
    return (
      <>
        {(firstTime || quick) && apiStatus && apiStatus.loading && <Loader />}
        <Search
          quickSearch={() => this._quickSearch()}
          token={token}
          notLogged={this._notLogged}
        />
        {this._renderContent(list, apiStatus, current, token, quick)}
      </>
    );
  }

Has anyone faced such a problem? Thank you!

[itseramin]

How did you fix it?

[itseramin]

How did you fix it?

renderCard={(card) => (card && <Cardz card={card} />) || null} idk if that was ur problem but this is what i was looking for