'How to stop Flatlist disaplaying same items multiple times in react native?

I'm novice of programming and I'm practicing react native to make my propre apps. My problem : when I'm using Flatlist, it renders multiple times same items which are fetched by datastore. I have for the time being totally 9 items in the array of 'Today' data which contains words, definition and pronunciation.

This is schema.graphql :

enum Genders {
  MALE
  FEMALE
  OTHER
}

type User @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  bio: String!
  age: String!
  gender: Genders!
  image: String
  sub: String!
}

type Today @model @auth(rules: [{allow: private}]) {
  id: ID!
  word: String!
  pronunciation: String
  definition: String!
}

And Flatlist brings 9 times my feed ui whenever it calls item inside. I hope I explained well whole this..

my HomeScreen code is like this (I'm fetching datas from DataStore of aws amplify.

    import React, { useState, useEffect } from 'react';
    
    import { View, FlatList } from 'react-native';
    import Title from '../../components/Title'
    import { Today } from '../../models';
    
    
    import Feed from '../../components/Dic/components/Feed';
    import {DataStore} from '@aws-amplify/datastore';
    
    const HomeScreen = () => {
 
        const [todays, setTodays] = useState([]);
    
        useEffect (() => {
            const fetchTodays = async () => {
                setTodays(await DataStore.query(Today));
            };
            fetchTodays();
        },[]);
    
        return (
        <View style={{backgroundColor:'white', height: 1000}}>
            <Title />
            <FlatList
                data={todays}
                renderItem={({item}) => <Feed note={todays} /> } 
// I don't know why I can't use 'item' instead of 'todays' after note but <Feed note={item} /> doesn't work.
            />
        </ View>
        )
        
        }
        
    export default HomeScreen;

Here is my feed code.


    import React, { useState, useEffect } from 'react';
    import { View, Text, TouchableOpacity } from 'react-native';
    
    import styles from './styles';
    
    import Icon from 'react-native-vector-icons/AntDesign';
    
    import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
    
    
    const Feed = props => {
    
        const {note} = props;
       
    
        const [currentIndex, setCurrentIndex] = useState(0);
        const [nextIndex, setNextIndex] = useState(currentIndex + 1);
        const [prevIndex, setPrevIndex] = useState(currentIndex - 1);
    
   
        const prevWord = note[prevIndex];
        const currentWord = note[currentIndex];
        const nextWord = note[nextIndex];
    
        console.warn[note];
    
        useEffect (() => {
            if (currentIndex < 0) {
                setCurrentIndex(value=0);
                return;
            } 
            if (currentIndex >= note.length){
                setCurrentIndex(value=note.length -1);
                
            }
        
          }, deps=[currentIndex]);
        
        const onPressedRight = () => {
        setCurrentIndex(currentIndex + 1);
    
        };
        const onPressedLeft = () => {
        setCurrentIndex(currentIndex - 1);
    
        };
    
        return (
            <View>
                <View Style={styles.headerContainer}>
                    <View style={styles.card}>
                        <TouchableOpacity style={styles.headerLeft} onPress={onPressedLeft}> 
                         
                            <MaterialIcons name="signal-cellular-null"  size={40} 
                            style={{marginLeft:30, 
                            transform : [{rotate: '135deg'}],
                            marginRight: -25,
                             }}/>
                        
                            
                        </TouchableOpacity>
                    <View style={styles.headerOutline}>
                        <View style={styles.header}>
                        {currentWord && (
                        <Text style={styles.text}>{currentWord.word}  <Icon name="sound" size={20} color='#ff8c8c'/></Text>
                        )}
                        {currentWord && (
                        <Text style={styles.pronunciation}>{currentWord.pronunciation}</Text>
                        )}
                    </View>
                    </View>
                        <TouchableOpacity style={styles.headerRight} onPress={onPressedRight} >
                            <MaterialIcons name="signal-cellular-null"  size={40} 
                            style={{marginLeft:30, 
                            transform : [{rotate: '-45deg'}],
                            marginLeft: -57,
                            }}/>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.bodyContainer}>
                    <Text style={styles.defiText}>Definition</Text>
                  
                    {currentWord &&(<Text style={styles.defi}>{currentWord.definition}</Text>
                    )}
                </ View>
               
            </View>
        
        );
    }
    
    export default Feed;



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source