React හි state හි තාර්කික අගය

අපි inCart state එකක් සාදමු, එය නිෂ්පාදනය කරත්තයේ තිබේද නැද්ද යන්න පෙන්වයි:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		
	</div>;
}

false අගය යන්නෙන් අදහස් කරන්නේ නිෂ්පාදනය කරත්තයේ නොමැති බවත්, true අගය යන්නෙන් අදහස් කරන්නේ කරත්තයේ ඇති බවත් වේ. ත්‍යාගශීලී ක්‍රියාකරුවා භාවිතා කර මේ ගැන තොරතුරු ප්‍රදර්ශනය කරමු:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'කරත්තයේ ඇත' : 'කරත්තයේ නැත'}</span>
	</div>;
}

දැන් අපි බොත්තමක් සාදමු, එය එබූ විට නිෂ්පාදනය කරත්තයට එකතු වේ:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'කරත්තයේ ඇත' : 'කරත්තයේ නැත'}</span>
		<button onClick={() => setInCart(true)}>බොත්තම</button>
	</div>;
}

අපගේ කේතය විචලනය කරමු, එවිට පළමු අවස්ථාවේ එබීම කරත්තයට එකතු කරන අතර දෙවන අවස්ථාවේ එබීම - එයින් ඉවත් කරයි:

function App() {
	const [inCart, setInCart] = useState(false);
	
	return <div>
		<span>{inCart ? 'කරත්තයේ ඇත' : 'කරත්තයේ නැත'}</span>
		<button onClick={() => setInCart(!inCart)}>බොත්තම</button>
	</div>;
}

බොත්තමක් සාදන්න, එය එබූ විට පරිශීලකයා තහනම් කරන අතර තවත් බොත්තමක් සාදන්න, එය එබූ විට පරිශීලකයාගේ තහනම ඉවත් කරයි.

පෙර කාර්යය විචලනය කරන්න එවිට බොත්තම් දෙකෙන් සෑම විටම අදාළ එක පමණක් දෘශ්‍යමාන වේ. එනම්, පරිශීලකයා තහනම් කර ඇත්නම්, එවිට දෘශ්‍යමාන වන්නේ තහනම ඉවත් කිරීම සඳහා වූ බොත්තම වන අතර, තහනම් නොකර ඇත්නම් - තහනම් කිරීම සඳහා වූ බොත්තම වේ.