React শিখুন
Describing the UI

JavaScript in JSX with Curly Braces

JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.

আপনি যা শিখবেন

  • How to pass strings with quotes
  • How to reference a JavaScript variable inside JSX with curly braces
  • How to call a JavaScript function inside JSX with curly braces
  • How to use a JavaScript object inside JSX with curly braces

quotes এর সাথে স্ট্রিং পাসিং

আপনি যখন JSX-এ একটি স্ট্রিং attribute পাস করতে চান, আপনাকে এটি single বা double quotes রাখতে হবে:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

এখানে, "https://i.imgur.com/7vQD0fPs.jpg" এবং "Gregorio Y. Zara" স্ট্রিং হিসেবে পাস করা হয়েছে ।

কিন্তু যদি আপনি dynamic ভাবে src বা alt টেক্সট নির্দিষ্ট করতে চান? আপনি জাভাস্ক্রিপ্ট থেকে একটি value ব্যবহার করে " and " কে { and } দিয়ে পরিবর্তন করতে পারেন:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

className="avatar" এবং src={avatar} এর মধ্যে পার্থক্য লক্ষ্য করুন। className="avatar" একটি "avatar" নামের CSS ক্লাসকে নির্দিষ্ট করে ও ইমেজকে গোলাকার করে অপরদিকে, src={avatar}, avatar নামের জাভাস্ক্রিপ্ট ভেরিয়েবলের value পড়ে। এর কারণ হচ্ছে, curly braces আপনাকে আপনার মার্কআপ এর ভিতরে জাভাস্ক্রিপ্ট এর কাজ করতে দেয়!

Curly braces ব্যবহার: জাভাস্ক্রিপ্ট জগতের একটি window

JSX হল জাভাস্ক্রিপ্ট লেখার একটি বিশেষ উপায়। তার মানে curly braces { } দিয়ে JSX এর ভিতরে জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভব। নীচের উদাহরণটিতে প্রথমে বিজ্ঞানীর জন্য একটি নাম ঘোষণা করা হয়েছে, name, তারপর এটিকে <h1> এর ভিতরে curly braces দিয়ে embeds করা হয়েছে:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

নামের value 'Gregorio Y. Zara' থেকে 'Hedy Lamarr'-এ পরিবর্তন করার চেষ্টা করুন। দেখুন কিভাবে list title পরিবর্তন হয়?

যেকোন জাভাস্ক্রিপ্ট এক্সপ্রেশন curly braces মধ্যে কাজ করবে, যেমন formatDate() এর মতো function calls:

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

কোথায় curly braces ব্যবহার করবেন

আপনি JSX এর ভিতরে শুধুমাত্র দুটি উপায়ে curly braces ব্যবহার করতে পারেন:

  1. সরাসরি JSX ট্যাগের ভিতরে text হিসাবে: <h1>{name}'s To Do List</h1> কাজ করে, কিন্তু <{tag}>Gregorio Y. Zara's To Do List</{tag}> করবে না৷

  2. As text directly inside a JSX tag: <h1>{name}'s To Do List</h1> works, but <{tag}>Gregorio Y. Zara's To Do List</{tag}> will not.

  3. As attributes immediately following the = sign: src={avatar} will read the avatar variable, but src="{avatar}" will pass the string "{avatar}".

Using “double curlies”: CSS and other objects in JSX

In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like { name: "Hedy Lamarr", inventions: 5 }. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: person={{ name: "Hedy Lamarr", inventions: 5 }}.

You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the style attribute:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

Try changing the values of backgroundColor and color.

You can really see the JavaScript object inside the curly braces when you write it like this:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

The next time you see {{ and }} in JSX, know that it’s nothing more than an object inside the JSX curlies!

Pitfall

Inline style properties are written in camelCase. For example, HTML <ul style="background-color: black"> would be written as <ul style={{ backgroundColor: 'black' }}> in your component.

More fun with JavaScript objects and curly braces

You can move several expressions into one object, and reference them in your JSX inside curly braces:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

In this example, the person JavaScript object contains a name string and a theme object:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

The component can use these values from person like so:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.

Recap

Now you know almost everything about JSX:

  • JSX attributes inside quotes are passed as strings.
  • Curly braces let you bring JavaScript logic and variables into your markup.
  • They work inside the JSX tag content or immediately after = in attributes.
  • {{ and }} is not special syntax: it’s a JavaScript object tucked inside JSX curly braces.

Try out some challenges

Challenge 1 of 3:
Fix the mistake

This code crashes with an error saying Objects are not valid as a React child:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Can you find the problem?

PreviousWriting Markup with JSXNextPassing Props to a Component

How do you like these docs?