state inside each flatlist component not being remembered - reactjs

Question

I have this flatlist which lists all the jobs,uponclick we are taken to a Job details page where you can apply to the job. On apply, the button name changes to "applied" and it is disabled. I got this part working,. however when I go back to homepage and click on the same job again, the button is clickable and still says "apply now", instead of "applied". Does this have anything to do with flatlist and navigation?
Home.js:
export default function Home(params) {
const{ navigation}=params;
...
return(
<FlatList
data={getCompanies(companies, filter)}
renderItem={({ item }) => {
return(
<TouchableOpacity onPress={()=>{ navigation.navigate('Job Details',item)}}>
<View style={styles.listingCard}>
<View style={styles.listingCardBody}>
<Text style={styles.listingCardTitle}>{item.title}</Text>
<Text style={styles.listingCardDescription}>
Here is a really simple description from {item.title} about the
role being advertized...
</Text>
</View>
</View>
</TouchableOpacity>
);
}}
keyExtractor={(item, index) => { return item.id; }}
contentContainerStyle={styles.content}
/>
);}
Job Details:
function Jobdetails({route, navigation}){
const{ title, Category, rateHourly, responsibilities,location, postedBy,id,jobOverview, jobType, startDate, endDate, latitude, longitude}= route.params;
const [ butText, setButText] = useState("Apply Now");
const [ clickable, setClickable ]= useState(false);
<TouchableOpacity disabled={ clickable } style={page.button} onPress={()=>{
//apply() works fine
apply(id).then(async (result)=>{
if(result.succeeded()){
setButText('Application Successful!');
setClickable(true);
}
});
}}>
<Text style={page.text}>{ butText }</Text>
</TouchableOpacity>
Why isn't 'clickable' value being remembered by the app?

Answer 1

Following up on my comment,
Create a CLickableContext.js with
import { createContext } from "react";
export const CLickableContext= createContext(null);
On a component higher up in your app, set up the provider with the usestate hook.
import { CLickableContext} from "../CLickableContext";
...
const [clickable, setClickable] = useState(false);
...
<CLickableContext.Provider value={{ clickable, setClickable }}>
<YourApp/>
</CLickableContext.Provider>
Then include the context in any compenent throughout the app
import { useContext } from "react";
import { CLickableContext} from "../CLickableContext";
//Home.js
export default function Home(params) {
const { clickable, setClickable } = useContext(CLickableContext);
const{ navigation}=params;
...
return(
<FlatList
data={getCompanies(companies, filter)}
renderItem={({ item }) => {
return(
<TouchableOpacity onPress={()=>{ navigation.navigate('Job Details',item)}}>
<View style={styles.listingCard}>
<View style={styles.listingCardBody}>
<Text style={styles.listingCardTitle}>{item.title}</Text>
<Text style={styles.listingCardDescription}>
Here is a really simple description from {item.title} about the
role being advertized...
</Text>
</View>
</View>
</TouchableOpacity>
);
}}
keyExtractor={(item, index) => { return item.id; }}
contentContainerStyle={styles.content}
/>
);}
And
//Jobdetails.js
import { useContext } from "react";
import { CLickableContext} from "../CLickableContext";
function Jobdetails({route, navigation}){
const { clickable, setClickable } = useContext(CLickableContext);
const{ title, Category, rateHourly, responsibilities,location, postedBy,id,jobOverview, jobType, startDate, endDate, latitude, longitude}= route.params;
const [ butText, setButText] = useState("Apply Now");
<TouchableOpacity disabled={ clickable } style={page.button} onPress={()=>{
//apply() works fine
apply(id).then(async (result)=>{
if(result.succeeded()){
setButText('Application Successful!');
setClickable(true);
}
});
}}>
<Text style={page.text}>{ butText }</Text>
</TouchableOpacity>