If you're not working with an array, and just want to modify a property in a standalone object, use the spread operator:
const user = { id: 1, name: "Jakkrit", online: true };
const updatedUser = { ...user, online: false }; // or online: !user.onlineIf you're working with an array of objects and want to modify just one item based on a condition (like id), use .map() to create a new array where only the matched item is updated — all others stay untouched.
const users = [
{ id: 1, name: "Jakkrit", online: true },
{ id: 2, name: "Andrew", online: false },
{ id: 3, name: "Elizabeth", online: true },
]
const newUsers = users.map(user => {
if (user.id === 2) {
return { ...user, online: !user.online };
}
return user;
});You can use the spread operator to copy an object and then add a new property during the process.
const user = { id: 1, name: "Jakkrit" };
const updatedUser = { ...user, online: true };JavaScript doesn't have a built-in spread way to remove a property, but you can use object destructuring to omit a property cleanly.
const user = { id: 1, name: "Jakkrit", online: true };
const { online, ...userWithoutOnline } = user;
console.log(user); // still has online (untouched)
console.log(userWithoutOnline); // online is gone hereSuper useful when you want to send or store an object without certain fields like removing password before sending to the client.
When working with a list of objects (like tasks, users, posts), you often need to add a new one. Use the spread operator to create a new array with the added object.
const users = [
{ id: 1, name: "Jakkrit" },
{ id: 2, name: "Andrew" },
];
const newUser = { id: 3, name: "Elizabeth" };
const updatedUsers = [...users, newUser];const users = [
{ id: 1, name: "Jakkrit" },
{ id: 2, name: "Andrew" },
];
const [myUsers, setMyUsers] = useState(users);
const newUser = { id: 3, name: "Elizabeth" };
setMyUsers(prev => [...prev, newUser]);To remove a specific object from an array, use .filter(), it returns a new array that excludes items based on your condition.
const users = [
{ id: 1, name: "Jakkrit" },
{ id: 2, name: "Andrew" },
{ id: 3, name: "Elizabeth" },
];
const updatedUsers = users.filter(user => user.id !== 2);const users = [
{ id: 1, name: "Jakkrit" },
{ id: 2, name: "Andrew" },
{ id: 3, name: "Elizabeth" },
];
const [myUsers, setMyUsers] = useState(users);
setMyUsers(prev => prev.filter(user => user.id !== 2));To replace an object in an array, use .map() and return a completely new object when a match is found. All other items should remain unchanged.
const users = [
{ id: 1, name: "Jakkrit" },
{ id: 2, name: "Andrew" },
{ id: 3, name: "Elizabeth" },
];
const replacement = { id: 2, name: "Delta" };
const updatedUsers = users.map(user =>
user.id === replacement.id ? replacement : user
);const users = [
{ id: 1, name: "Jakkrit" },
{ id: 2, name: "Andrew" },
{ id: 3, name: "Elizabeth" },
];
const [myUsers, setMyUsers] = useState(users);
const replacement = { id: 2, name: "Delta" };
setMyUsers(prev => prev.map(user => user.id === replacement.id ? replacement : user));