pass database data to another screen in react native - reactjs

Question

Now I wanted to implement a function that when I click on a list of data from mysql server on my react native app, it will move to another screen and pass the detail of the data into it here is the code that I have implement
const GetJobDetail=useCallback= (user,job, jobid, machinecode, startTime) =>{
navigation.navigate('Jobview', {
UserId : user,
Job : job,
JobId:jobid,
MachineCode : machinecode,
StartTime : startTime
},[]);
}
return (
<View style={{ flex: 1, padding: 24 }}>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Button title={item.job} style={styles.rowViewContainer} onPress={()=>navigation.navigate(GetJobDetail(item.user,item.job,item.jobid,item.machinecode,item.startTime))}/>
)}
/>
)}
</View>
);
I have already successful fetch the data into my react native apps, the data look like
the data is only show the job of the user instead of showing all detail if I enter userid='1111' then it will only show the job for userid='1111'. but now i wish to implement that if I clicked the job in this list it will move to next screen and send all the details to that screen using route.params. I have tried using callback function but it gave me error "useCallback" is read-only.
I also founded some source from other site but it is in class component the code will look like this.
i am sure that this first is the function that pass the value to another screen
GetStudentIDFunction=(student_id,student_name, student_class, student_phone_number, student_email)=>{
this.props.navigation.navigate('Third', {
ID : student_id,
NAME : student_name,
CLASS : student_class,
PHONE_NUMBER : student_phone_number,
EMAIL : student_email
});
}
and this one is calling the function and pass the data to another screen
renderRow={ (rowData) => <Text style={styles.rowViewContainer}
onPress={this.GetStudentIDFunction.bind(
this, rowData.student_id,
rowData.student_name,
rowData.student_class,
rowData.student_phone_number,
rowData.student_email
)} >
{rowData.student_name}
</Text> }
pls help me to point out what is my mistake or error. Thanks
update:
after tried multiple time finally it works with this code. On the first page it get the data
const GetDetail=(id,user,job,jobid,machinecode,startTime)=>{
navigation.navigate('JobView',{Id:id,UserId:user,Job:job,JobId:jobid,MachineCode:machinecode,StartTime:startTime});
}
return (
<View style={{ flex: 1, padding: 24,backgroundColor:'cyan' }}>
{isLoading ? <ActivityIndicator/> : (
<FlatList
data={data}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text style={styles.rowViewContainer} onPress={()=>{GetDetail(item.id,item.user,item.job,item.jobid,item.machinecode,item.startTime)}}>{item.job}</Text>
)}
/>
)}
</View>
);
}
On this screen it pass the data from previous screen by using route.params&&route.params.variable\\variable=your own variable that carry the data from th eprevious screen
useEffect(()=>{
setCode(route.params && route.params.MachineCode)
setUserid(route.params && route.params.UserId)
setJob(route.params && route.params.Job)
setJid(route.params && route.params.JobId)
setStarttime(route.params && route.params.StartTime)
setId(route.params && route.params.Id)
},[]
)
Hope this will help you guys when faced the same problem :)

Answer 1

Store your data in some useState after fetching. You can send data to another screen/component in two ways:
You can pass data as props or use a callBack if those screens/components are in parent-child relationship.
Parent to child: Pass as props
<FlatList
data={customerData}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
keyExtractor={(item, index) => index}
renderItem={({item, index}) => (
<KYC_ListCell
itemdata={customerData[index]}
onItemClick={() => {
props.updateCustomerInformation(customerData[index]);
navigation.navigate('Customer360Info');
}}
/>
Using a call back to pass data from child to parent
//Parent
<HeaderView
username={'HelpDesk'}
showHeaderWithSearch
placeholderText={'Customer ID'}
showRefreshIcon
onMenuClick={() => {
setModalVisible(true);
}}
onRefreshClicked={() => {
getComplaintsListOnPageLoad();
}}
onSearchClicked={text => {
setSearch(text);
getSearchedItem(text);
}}
/>
//child
<Search
value={search}
placeholderText={props.placeholderText}
onChangeText={text => setSearch(text)}
onClearText={() => setSearch('')}
onSearchPressed={() => props.onSearchClicked(search)}
/>
You can pass data while navigating as route param