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

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

jsxconst state = useState('prod');

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

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

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

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

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

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

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

jsximport React, { useState } from 'react';

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

export default App;

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