JSX में Expressions जोड़ना
JSX में curly braces छोटी windows जैसी हैं जो असली JavaScript values को आपके markup में झलकने देती हैं।
In this page:
Syntax
function ComponentName() {
const variable = value;
return <element>{variable}</element>; // any JS expression in { }
}
<element>{functionName(argument)}</element>Curly Braces से JavaScript Embed करना
कोई भी JavaScript expression curly braces {} में wrap करके JSX में insert किया जा सकता है -- variables, function calls, arithmetic, और भी बहुत कुछ।
Note:
Curly braces JSX में कहीं भी काम करते हैं: text content के अंदर, या एक attribute value के रूप में।
Warning:
Curly braces सिर्फ expressions (जो एक value produce करते हैं) accept करते हैं -- if या for जैसे statements directly {} के अंदर नहीं जा सकते।
उदाहरण: Embedding JavaScript with Curly Braces
<!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 Sum() {
const a = 4;
const b = 5;
return <p>{a} + {b} = {a + b}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Sum />);
</script>
</body>
</html>JSX के अंदर Variables Use करना
आपके component function में defined एक variable को returned JSX के अंदर {variableName} उपयोग करके directly reference किया जा सकता है।
Note:
पहले एक well-named variable में एक value compute करें, फिर JSX में उस variable को reference करें -- यह JSX को readable रखता है।
Warning:
किसी ऐसे variable को reference करना जो मौजूद नहीं (नाम में एक typo) component render होने पर एक ReferenceError का कारण बनता है।
उदाहरण: Using Variables Inside JSX
<!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 Greeting() {
const name = 'Asha';
return <p>Hello, {name}!</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting />);
</script>
</body>
</html>JSX के अंदर Functions Call करना
आप curly braces के अंदर directly एक function call कर सकते हैं, और इसका return value output में insert हो जाता है -- values को वहां format करने के लिए useful जहां वे display होती हैं।
Note:
JSX में inline call किए गए functions को छोटा और fast रखें, क्योंकि वे हर render पर run होते हैं।
Warning:
एक function call करना जो undefined (कुछ नहीं) return करता है कुछ भी visible render नहीं करता, जो JSX में एक bug जैसा लग सकता है जब असली कारण function खुद है।
उदाहरण: Calling Functions Inside JSX
<!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 formatPrice(cents) {
return '$' + (cents / 100).toFixed(2);
}
function Price() {
return <p>Price: {formatPrice(1999)}</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Price />);
</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. #}
आम गलतियां
- JSX curly braces के अंदर directly एक JavaScript statement (if block जैसा) embed करने की कोशिश करना -- सिर्फ expressions वहां काम करते हैं।
- यह भूल जाना कि objects JSX children के रूप में directly render नहीं हो सकते -- आपको एक error मिलेगा।
- सिर्फ dynamic value के बजाय पूरे JSX block के around curly braces उपयोग करना।
चैप्टर सारांश
- Curly braces
{}JSX के अंदर JavaScript expressions embed करते हैं। - कोई भी valid expression काम करता है: variables, function calls, arithmetic, ternaries।
- if/for जैसे statements directly
{}के अंदर काम नहीं करते -- इसके बजाय expressions उपयोग करें। - एक plain object render करना error throw करता है; इसके बजाय इसकी properties render करें।
ब्राउज़र सपोर्ट
कोई browser-specific restrictions नहीं -- यह एक JSX/Babel compilation-time feature है।
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: