I have a screen that lists "tasks" all being the same component <TaskItem> just with different props sent to them.
Each <TaskItem> is created by iterating over documents in a Firestore database collection.
I want to access the doc().id of the individual when they are clicked.
My question is: How can I access the doc().id for each particular <TaskItem> after they are rendered? Is this doc().id somehow attached or stored with the <TaskItem> when it is created?
tasks1 retreives the tasks from the backend and creates an array to use map on
db.collection('users').doc(id).collection('tasks').onSnapshot((snapshot)=>{
const tempTasks = [];
snapshot.forEach(
doc => {
tempTasks.push(doc.data());
}
)
setTasks(tempTasks);
});
Firestore Database structure
db.collection('users').doc(id).collection('tasks').doc().id
I Iterate, using map over 'tasks' and create a <TaskItem> for each 'tasks' item in the database. Is the doc().id for each stored with it or do I somehow have to manually access it?
<View style={styles.tasks}>
{tasks1.map((task) => {
return (
<View style={{ margin: 4}}>
<TaskItem
//PROPS
notes={task.notes}
reminder={task.reminder}
name={task.name}
assigned={task.assigned}
tagName = {task.tag}
profileImage={task.profileImage}
color={task.color}
changeModal={() => changeStateHandler()}
onPress={()=>setTagClicked(!tagClicked)}
/>
</View>
);
})}
</View>
After using .data(), your object only contains the fields which you have stored in Firestore. You can have both data and the document ID by adding a few lines, like this:
doc => {
var newData = doc.data();
newData.id = doc.id;
tempTasks.push(newData);
}