React component doesn't append newly added items to the list

Question

I have a react component that prints out a list of items from an array of objects. Each object can either be a newly created one, or it can be the same object but with some of its properties updated.

Updating an existing object occurs without problems, but when a new object is received, the length of the array increases by 1, and all elements become duplicates of the newly added object.

Here is the react component:

{quests.map(quest => (
<div>
    <div className={styles.questTitle}>{quest.description.title}</div>
    <ul className={styles.questsList}>
    {quest.description.steps.map(step => (
        <li key={quest.id} className={styles.questStep}>{`${quest.status}/2 ${step}`}</li>
    ))}
    </ul>
</div>
))}

Here is how it gets updated:

@action
setQuests(quest: QuestFuncReturnValue) {
// If the quest doesn't exist, append it to the quests list, else update it
const questExists = this.quests.find(oldQuest => oldQuest.id === quest.id);
if (!questExists) {
    this.quests = [...this.quests, quest];
    return;
}
const updatedQuests = this.quests.map(oldQuest => (quest.id === quest.id ? quest : oldQuest));
this.quests = updatedQuests;
console.log(this.quests);
}

I'm using Mobx for the state: Here is the initial value of the array:

@observable.ref quests: QuestFuncReturnValue[] = [];

Answer 1

It actually looks like you will replace every element with the same quest object on an update because of this:

quest.id === quest.id