Objects और Arrays के साथ State
State में एक object या array update करना पूरी drawer को एक नई से replace करने जैसा है, पुरानी drawer के अंदर चीज़ें बस move करने के बजाय।
In this page:
Syntax
setObject({ ...object, property: newValue }); // update an object
setArray([...array, newItem]); // add
setArray(array.filter((item) => item.id !== id)); // removeState में एक Object Update करना
State में एक object की एक property update करने के लिए, existing object को एक नए में spread करें और सिर्फ वह property override करें जो change हुई। यह एक brand-new object reference बनाता है, जो वही है जो React को update detect करने देता है।
Note:
setState({...state, propertyToChange: newValue}) pattern ज़्यादातर object state updates को cover करता है।Warning:
state.name = New; setState(state); लिखना old object को mutate करता है और अक्सर re-render trigger करने में fail होता है।उदाहरण: Updating an Object in State
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function ProfileForm() {
const [user, setUser] = React.useState({ name: "Sam", age: 25 });
return (
<div>
<p>{user.name}, {user.age}</p>
<button onClick={() => setUser({...user, age: user.age + 1})}>Birthday!</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<ProfileForm />);
</script>
</body>
</html>State में एक Array में Add करना
State में एक array में एक item add करने के लिए, existing array पर .push() call करने के बजाय spread operator plus नई item उपयोग करके एक नया array बनाएं। यह update को immutable रखता है और सुनिश्चित करता है कि React change notice करे।
Note:
setItems([...items, newItem]) array state में add करने का standard pattern है।Warning:
items.push(newItem); setItems(items); original array को mutate करता है और React को update miss करने का कारण बन सकता है।उदाहरण: Adding to an Array in State
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function TodoList() {
const [items, setItems] = React.useState(["Buy milk"]);
function addItem() {
setItems([...items, "New task " + (items.length + 1)]);
}
return (
<div>
<ul>{items.map((item, i) => <li key={i}>{item}</li>)}</ul>
<button onClick={addItem}>Add Item</button>
</div>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<TodoList />);
</script>
</body>
</html>State में एक Array से Remove करना
एक item remove करने के लिए, .splice() जैसे mutating method उपयोग करने के बजाय .filter() उपयोग करके unwanted item को filter out करने वाला एक नया array बनाएं। .filter() naturally एक नया array return करता है जिसमें सिर्फ वे items हैं जो check pass करते हैं।
Note:
एक unique ID से filter करना (array index के बजाय) ज़्यादा safe है जब items reorder या add हो सकें।
Warning:
items.splice(index, 1) array को जगह पर mutate करता है और React state के साथ misuse करना आसान है।उदाहरण: Removing from an Array in State
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function TodoList() {
const [items, setItems] = React.useState(["Buy milk", "Walk dog", "Read book"]);
function removeItem(index) {
setItems(items.filter((_, i) => i !== index));
}
return (
<ul>
{items.map((item, i) => <li key={i}>{item} <button onClick={() => removeItem(i)}>x</button></li>)}
</ul>
);
}
ReactDOM.createRoot(document.getElementById('root')).render(<TodoList />);
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
.push(),.splice(), या similar mutating array methods को directly state पर call करना।- एक state object की एक nested property को directly modify करना (
state.user.name = New) इसे एक नए object में spread करने के बजाय। - यह भूल जाना कि spreading सिर्फ एक level deep copy करती है -- nested objects/arrays को अपना खुद का spread चाहिए।
चैप्टर सारांश
- State में Objects और arrays को नई copies से replace किया जाना चाहिए, mutate नहीं।
- Spread operator (
...) objects/arrays को immutably copy और update करने के लिए standard tool है। .map(),.filter(), और.concat()जैसे array methods mutate करने के बजाय नए arrays return करते हैं।- Nested state को हर level पर spreading चाहिए जो change होता है।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- standard JavaScript spread syntax (ES2018+) पर rely करता है।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: