React Object Manipulation
Used in this guide:Update a Property in a Single Object
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.onlineUpdate a Specific Object in an Array (by ID or condition)
If 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;
});Add a New Property to an Object
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 };Create a New Object Without a Specific Property
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 here- It extracts the online property from the user object.
- It collects the rest of the properties (everything except online) into a new object called userWithoutOnline.
Super useful when you want to send or store an object without certain fields like removing password before sending to the client.
Add a New Object to an Array
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];With useState
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]);Remove an Object from an Array (by ID or condition)
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);With useState
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));Replace an Object in an Array (by ID or condition)
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
);With useState
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));