Updating data with dynamic content

[sathucandy]

The issue I am facing is I am not able to load my swiper with dynamic data. If I am recieving lets say 10 data then I have to make 10 empty objects in an array to get the data displayed and for my dynamic data my cards are blank . Dropping my code below, let me know how can i improve

import React, {useState, useEffect} from 'react'; import {StyleSheet, Text, View} from 'react-native';

import Swiper from 'react-native-deck-swiper'; import styled from 'styled-components';

function* range(start, end) { for (let i = start; i <= end; i++) { yield i; } }

const Recommendations = () => { const [cardsState, updateCardsState] = useState({ // cards: fetch('https://reactnative.dev/movies.json') // .then((response) => response.json()) // .then((json) => { // json.movies; // }), cards: [{}, {}, {}], swipedAllCards: false, swipeDirection: '', cardIndex: 0, });

useEffect(() => { fetch('https://reactnative.dev/movies.json') .then((response) => response.json()) .then((json) => { updateCardsState({ ...cardsState, cards: json.movies, //cardsState.cards.push(...json.movies), //[...json.movies], }); // console.log(json.movies); console.log(cardsState.cardIndex); console.log(cardsState.cards); }) .catch((error) => console.error(error));

// eslint-disable-next-line react-hooks/exhaustive-deps

}, [cardsState.cardIndex]);

const renderCard = (card, index) => { // console.log({cardsState.cards[index].id}); if ( typeof cardsState.cards !== 'undefined' && cardsState.cards.length > 0 ) { return (

{cardsState.cards[index].title} ); } }; const onSwiped = (type) => { // console.log(`on swiped ${type}`); updateCardsState({ ...cardsState, cardIndex: cardsState.cardIndex + 1, }); }; const onSwipedAllCards = () => { updateCardsState( { ...cardsState, swipedAllCards: true, }, [], ); }; const swipeLeft = () => { cardsState.swiper.swipeLeft(); }; return ( { cardsState.swiper = swiper; }} backgroundColor={'#20242b'} onSwiped={() => onSwiped('general')} onSwipedLeft={() => onSwiped('left')} onSwipedRight={() => { onSwiped('right'); console.log('card index is: ' + cardsState.cardIndex); }} onSwipedTop={() => onSwiped('top')} onSwipedBottom={() => onSwiped('bottom')} onTapCard={swipeLeft} cards={cardsState.cards} cardIndex={cardsState.cardIndex} cardVerticalMargin={80} renderCard={renderCard} onSwipedAll={onSwipedAllCards} stackScale={4.5} stackSize={3} stackSeparation={-25} overlayLabels={{ bottom: { title: 'BLEAH', style: { label: { backgroundColor: 'black', borderColor: 'black', color: 'white', borderWidth: 1, }, wrapper: { flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }, }, }, left: { title: 'NOPE', style: { label: { backgroundColor: 'black', borderColor: 'black', color: 'white', borderWidth: 1, }, wrapper: { flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'flex-start', marginTop: 30, marginLeft: -30, }, }, }, right: { title: 'LIKE', style: { label: { backgroundColor: 'black', borderColor: 'black', color: 'white', borderWidth: 1, }, wrapper: { flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', marginTop: 30, marginLeft: 30, }, }, }, top: { title: 'SUPER LIKE', style: { label: { backgroundColor: 'black', borderColor: 'black', color: 'white', borderWidth: 1, }, wrapper: { flexDirection: 'column', alignItems: 'center', justifyContent: 'center', }, }, }, }} animateOverlayLabelsOpacity animateCardOpacity swipeBackCard /> ); }; const Container = styled.View` flex: 1; `; const CardIndex = styled.Text` text-align: center; font-size: 50px; background-color: transparent; `; const Card = styled.View` flex: 1; border-radius: 4px; border-width: 2px; border-color: #e8e8e8; justify-content: center; background-color: white; `; export default Recommendations;

[cristian-milea]

@sathucandy at least wrap your code in a code block, it is easier to read, and put only the necessary (no need for styles for your question to be answered), also, check #153