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 (

<Swiper
ref={(swiper) => {
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.Viewflex: 1;;

const CardIndex = styled.Texttext-align: center; font-size: 50px; background-color: transparent;;

const Card = styled.Viewflex: 1; border-radius: 4px; border-width: 2px; border-color: #e8e8e8; justify-content: center; background-color: white;;

export default Recommendations;

[Cristi 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