How to print data in the form of Pagination from api response (in console) in React Native

Question

i try different tutorials but didn't solve my problem

This is my code where i got stuck

const [data, setData] = useState([])
    useEffect(() => {
          getData()
          
        }, [])
      
        const getData = async () => {
      
          fetch(`my Api`,{ 
          method: 'post',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          }
        }
          )
            .then((response) => response.json())
            .then((responseJson) => {
              setData(responseJson.result);
              console.log("log for Health professionals =====>", responseJson.result)
              console.log("current_page at:::: =====>", responseJson.result.current_page)

            })
            .catch((error) => {
              console.error(error);
            });
      
        }

    const renderItem = ({item }) => {
        return(
          <View style={styles.itemRow} >
    
            <Text style={{fontSize:20}}>{item.current_page}</Text>
            <Text style={{fontSize:40}}>{item.result.current_page}</Text>
         
          </View>
        )
      } 

  
    return (
        <FlatList
           style={styles.container}
               data={data}
               renderItem={renderItem}
               keyExtractor={(item, index)=>index.toString()}
        />
      
    )
  };

this is my api response };

i try to print data from my console . data i get from API and i want this response to be print in the form of pagination but it didn't show any result in my mobile screen. i try to solve the problem from different documentation but find nothing.
I just want to do some pagination with this api response in react native

Answer 1

As per your response you are passing wrong key to flatlist try below code

const getData = async () => {
  
      fetch(`my Api`,{ 
      method: 'post',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }
      )
        .then((response) => response.json())
        .then((responseJson) => {
          setData([...data, ... responseJson.data]);
           

        })
        .catch((error) => {
          console.error(error);
        });
  
    }


return (
    <FlatList
       style={styles.container}
           data={data}
           renderItem={renderItem}
           keyExtractor={(item, index)=>index.toString()}
    />
  
)


const renderItem = ({item }) => {
    return(
      <View style={styles.itemRow} >

        <Text style={{fontSize:20}}>{item.publisher}</Text>
        <Text style={{fontSize:40}}>{item.short_description}</Text>
     
      </View>
    )
  }