props passed for auction list and stakes

components/auction.stake.component.js

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, View, Text } from 'react-native';
 import themeColors from '../assets/colors';
 
 export const AppStakeItem = (props) => {
+  const [bid, setBid] = useState({});
+
+  useEffect(() => {
+    setBid(props.bid)
+  }, [])
   return(
     <View style={styles.stake}>
       <View style={styles.stakeWrapperEdges}/>
@@ -17,12 +22,12 @@ export const AppStakeItem = (props) => {
       <View style={styles.stakeDetailsContent}>
         <View>
           <View  style={styles.lotTile}>
-            <Text style={styles.lotText}>62</Text>
+            <Text style={styles.lotText}>{bid.id}</Text>
           </View>
         </View>
         <View style={styles.lotDetails}>
-          <Text style={styles.lotName}>William Grey</Text>
-          <Text style={styles.label}>Rs. 164.00</Text>
+          <Text style={styles.lotName}>{bid.name}</Text>
+          <Text style={styles.label}>Rs. {bid.bidprice}</Text>
         </View>
       </View>
       <View style={styles.stakeSideEdges}>

screen/Auction.Detail.Screen.js

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {View, StyleSheet, Text, ScrollView} from 'react-native';
 import { AppStakeItem } from '../components/auction.stake.component';
 import { AppContainer } from '../container/container';
@@ -7,7 +7,16 @@ import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
 import AppCarousel from '../components/carousel.component';
 import { AppAddBid } from '../components/add_bid_button.component';
 
-const  AuctionDetailScreen =  (props, {navigation}) => {
+const  AuctionDetailScreen =  ({route}) => {
+  const [auction, setAuction] = useState({bids: []});
+  const [bids, setBids] = useState([]);
+  console.log(route.params.auctionObject.bids);
+  useEffect(() => {
+    setAuction(route.params.auctionObject);
+  }, [])
+  useEffect(() => {
+    setBids(auction.bids)
+  }, [auction])
   return (
     <View style={styles.wrapper}>
       <View style={styles.header}>
@@ -16,19 +25,20 @@ const  AuctionDetailScreen =  (props, {navigation}) => {
       <View style={styles.container}>
         <AppContainer>
           <View style={styles.titleContent}>
-            <Text style={styles.auctionHeading}>Auction Item</Text>
+            <Text style={styles.auctionHeading}>{auction.name}</Text>
             <View style={styles.lotContainer}>
-              <Text style={styles.auctionText}>Lot No : </Text>
-              <View style={styles.lot}><Text style={styles.lotText}>17839</Text></View>
+              <Text style={styles.auctionText}>Owner : </Text>
+              <View style={styles.lot}><Text style={styles.lotText}>{auction.owner}</Text></View>
             </View>
           </View>
           <Text style={styles.auctionText}>Last Stakes</Text>
           <ScrollView horizontal style={{height: 100}}>
             <View style={styles.stakesContainer}>
-              <AppStakeItem/>
-              <AppStakeItem/>
-              <AppStakeItem/>
-              <AppStakeItem/>
+              {bids.map((bid) => {
+                return(
+                  <AppStakeItem bid={bid} />
+                )
+              })}
             </View>
         </ScrollView>
         <AppAddBid/>

screen/Home.Auction.Screen.js

@@ -29,7 +29,10 @@ const  HomeAuctionScreen =  ({navigation}) => {
           <View>
             {auctions.map((auction) => {
               return(
-                <AppAuctionItem label={auction.name} expire={auction.expire_date} onPress = {() => navigation.navigate("AuctionDetailScreen")}/>
+                <AppAuctionItem label={auction.name} expire={auction.expire_date} onPress = {() =>
+                  navigation.navigate("AuctionDetailScreen", {
+                  auctionObject: auction})
+                }/>
               )
             })}
           </View>