Updating an Items in a list in React

JavaScript
2

Not familiar with this, but just doing a bit of testing

If I add a getDoc and console.log in under const cafeDoc = doc(db, 'Cafes', id);

e.g.

const cafeDoc = doc(db, 'Cafes', id);
const docSnap = await getDoc(cafeDoc);
console.log("Document data:", docSnap.data());

On clicking update on for example ‘Cafe: Escaladenero2’

The logged output is

Document data:
{rank: 10, name: "Escaladenero2", id: "HKsBjP7xN09PiFmxOZD0", city: "Abuja 3"}

I then change rank to 15 and click on the update cafe button. As you say a new entry is added rather than the existing one updated.

If I click on the new addition the output for that one is

Document data:
{city: "Abuja 3", rank: 15, name: "Escaladenero2"}

The standout is the lack of ‘id’ on this wrongly added entry.

Sorry if this isn’t helpful, but it is pointing towards ‘id’ for me.