रिएक्ट में स्टेट्स का उपयोग

उत्पाद के नाम वाले स्टेट को बनाने के लिए useState फ़ंक्शन का उपयोग करते हैं:

const state = useState('prod');

परिणामस्वरूप, कॉन्स्टेंट state एक ऐरे होगा, जिसके पहले एलिमेंट में उत्पाद का नाम स्टोर रहेगा, और दूसरे में - नाम बदलने के लिए फ़ंक्शन:

const state   = useState('prod');
const name    = state[0];
const setName = state[1];

संक्षिप्तता के लिए आमतौर पर ऐरे के लिए इंटरमीडिएट कॉन्स्टेंट का उपयोग नहीं करते हैं, बल्कि डीस्ट्रक्चरिंग का उपयोग करते हैं:

const [name, setName] = useState('prod');

आइए अब अपने स्टेट को उत्पाद के नाम के साथ किसी लेआउट में दिखाएं:

return <p>
	<span>{name}</span>
</p>;

सब कुछ एक साथ रखते हैं और निम्नलिखित कोड प्राप्त करते हैं:

import React, { useState } from 'react';

function App() {
	const [name, setName] = useState('prod');
	
	return <div>
		<span>{name}</span>
	</div>;
}

export default App;

यदि इस कोड को रन करते हैं, तो शुरू में डिव में स्टेट का प्रारंभिक मान दिखाई देगा, हमारे मामले में 'prod'। स्टेट को setName फ़ंक्शन के माध्यम से बदलने पर लेआउट में स्वचालित रूप से स्टेट का नया मान दिखाई देगा।

मान लीजिए आप स्क्रीन पर यूज़र का डेटा दिखाना चाहते हैं: उसका नाम, उपनाम, उम्र। इसके लिए उपयुक्त प्रारंभिक मानों वाले स्टेट्स बनाएं।