diff --git a/beta/src/content/learn/updating-objects-in-state.md b/beta/src/content/learn/updating-objects-in-state.md index 1e23c8d3d50..0acfd065318 100644 --- a/beta/src/content/learn/updating-objects-in-state.md +++ b/beta/src/content/learn/updating-objects-in-state.md @@ -594,6 +594,108 @@ img { width: 200px; height: 200px; } +### Make a deep copy of the object using the global structuredClone() method {/*make-deep-object-copy-with-structuredclone*/} + +The structuredClone method is a built-in function in JavaScript that allows for the creation of a deep copy of an object or array, including all of its properties and nested objects, without any reference to the original object. This method was introduced in ECMAScript 6 (ES6) and is available in almost all modern browsers. + +So instead of using the `...` [object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) syntax, we can make use of the `structuredClone` method to copy the original object, mutate the copy and finally set the state with the new object: + + + +```js +import { useState } from 'react'; + +export default function Form() { + const [person, setPerson] = useState({ + name: 'Niki de Saint Phalle', + artwork: { + title: 'Blue Nana', + city: 'Hamburg', + image: 'https://i.imgur.com/Sd1AgUOm.jpg', + } + }); + + function handleNameChange(e) { + const personClone = structuredClone(person); + personClone.name = e.target.value; + setPerson(personClone); + } + + function handleTitleChange(e) { + const personClone = structuredClone(person); + personClone.artwork.title = e.target.value; + setPerson(personClone); + } + + function handleCityChange(e) { + const personClone = structuredClone(person); + personClone.artwork.city = e.target.value; + setPerson(personClone); + } + + function handleImageChange(e) { + const personClone = structuredClone(person); + personClone.artwork.image = e.target.value; + setPerson(personClone); + } + + return ( + <> + + + + +

+ {person.artwork.title} + {' by '} + {person.name} +
+ (located in {person.artwork.city}) +

+ {person.artwork.title} + + ); +} +``` + +```css +label { display: block; } +input { margin-left: 5px; margin-bottom: 5px; } +img { width: 200px; height: 200px; } +``` + +
+ + +To learn more about the structuredClone method in JavaScript, including its syntax and limitations, visit the MDN web docs at [structuredClone - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/structuredClone). + #### Objects are not really nested {/*objects-are-not-really-nested*/}