SamwithCode

Dynamic Values in JSX

React JSX Mein Dynamic Values

React JSX mein dynamic values ko use karte waqt, hum JavaScript expressions ko curly braces {} ke andar likhte hain. Yeh humein React components ke andar dynamic content render karne ki suvidha deta hai.

Dynamic JSX Code Example

      
        {`import React, { useState } from 'react';

const DynamicJSXExample = () => {
  const [name, setName] = useState("John Doe");
  const [age, setAge] = useState(25);

  const updateDetails = () => {
    setName("Jane Smith");
    setAge(30);
  };

  return (
    <div>
      <h3>Hello, my name is {name}</h3>
      <p>I am {age} years old.</p>
      <button onclick="{updateDetails}">Update Details</button>
    </div>
  );
};

export default DynamicJSXExample;`}

Is code mein humne useState hook ka use kiya hai, jisme name aur age ko dynamic values ke roop mein display kiya gaya hai. {name} aur {age} ko JSX ke andar curly braces mein use kiya gaya hai.

HTML in Tag Display

Agar aap HTML code ko text ke roop mein dikhana chahte hain bina usse render kiye, toh aapko HTML special characters ka use karna padta hai. Jaise ki, < ko < aur > ko > se replace karna padta hai.

HTML Code Example

      
        <div>This is a div tag</div>
        <p>This is a paragraph</p>
        <h3>This is a heading</h3>

Is code mein humne HTML tags ko < aur > ke equivalent HTML entities mein convert kiya hai, taki browser unhe as text display kare aur render na kare.