Up state different components

 

Lifting State Up - U guurinta state ka mid ah components kala duwan

React.js waa framework awood badan oo u fududeeya horumariyeyaasha inay dhisaan interfaces isticmaale firfircoon (dynamic UI). Mid ka mid ah fikradaha muhiimka ah ee React waa state management, taas oo xukunta sida xogta (data) loo maareeyo loona qaybiyo. Marka la dhisayo components badan oo wada shaqeynaya, mararka qaar waxa dhacda in xogta (state) la wadaago. Lifting State Up waa hab lagu hubinayo in xogta si habsami leh loogu gudbiyo components kala duwan.

Maxay tahay Lifting State Up?

Lifting State Up waa hab React.js loogu guuriyo state component hoose (child) kuna soo saaro component sare (parent). Tani waxay muhiim u tahay marka components kala duwan u baahan yihiin inay helaan xog isku mid ah. Halkii mid kasta oo ka mid ah components uu yeelan lahaa state u gaar ah, xogta waxaa lagu kaydiyaa component-ka sare si loo hubiyo in la wadaago isla xogta.

Tusaale ahaan, aan ka fikirno laba component oo kala ah TemperatureInput iyo TemperatureConverter. Labaduba waxay u baahan yihiin inay xog ka helaan midba midka kale. Haddii mid ka mid ah uu beddelo qiimaha, waa in kan kale isaguna cusboonaysiiyaa.

Sidee Lifting State Up u shaqeeyaa?

Waxaan u baahan nahay inaan xogta ka saarno component-ka hoose oo aan u gudbino component-ka sare (parent), kadibna component-hoose wuxuu xogta ka helayaa props, halkii uu lahaa state u gaar ah.

Tusaale Code Lifting State Up

Aan tusaale ku qaadano laba input oo kala ah Celsius iyo Fahrenheit oo isku xiran:

jsx

import { useState } from "react";

// Component-ka sare ee xukuma state-ka
function TemperatureConverter() {
  const [temperature, setTemperature] = useState("");

  // Function lagu maareeyo isbedelka qiimaha
  const handleChange = (e) => {
    setTemperature(e.target.value);
  };

  return (
    <div>
      <h2>Temperature Converter</h2>
      <TemperatureInput
        scale="Celsius"
        temperature={temperature}
        onTemperatureChange={handleChange}
      />
      <TemperatureInput
        scale="Fahrenheit"
        temperature={temperature}
        onTemperatureChange={handleChange}
      />
    </div>
  );
}

// Component-ka hoose ee input-ka
function TemperatureInput({ scale, temperature, onTemperatureChange }) {
  return (
    <div>
      <label>{scale}:</label>
      <input
        type="text"
        value={temperature}
        onChange={onTemperatureChange}
      />
    </div>
  );
}

export default TemperatureConverter;

Lifting State 
Sharaxaadda Code-ka

1. TemperatureConverter waa component-ka sare, wuxuuna hayaa state-ka temperature.
2. TemperatureInput waa component-hoose, wuxuu helayaa props si uu u isticmaalo xogta.
3. Markii user-ku wax ku qoro input, xogta waxa lagu kaydiyaa TemperatureConverter, kadibna dib ayaa loogu soo dirayaa labada input.
4. Tani waxay xaqiijinaysaa in labadooduba la wadaagaan xog isku mid ah.

Faa'iidooyinka Lifting State Up

✅ Wuxuu ka hortagayaa xog isku dhex yaacda.
✅ Wuxuu fududeeyaa wadaaga xogta components badan.
✅ Wuxuu hagaajiyaa sida React u shaqeyso iyo sida components iskula shaqeeyaan.
✅ Wuxuu yareeyaa code aan loo baahnayn oo la dhigi lahaa components badan.

Gabagabadii iyo gunaanudkii

Lifting State Up waa hab muhiim u ah React.js si ay components kala duwan si sax ah ugu wadaagaan state. Halkii xog laga hayn lahaa meelo kala duwan, waxaa wanaagsan in lagu hayo component sare si loo hagaajiyo maareynta xogta (state management). Tani waxay sahleysaa in components-ku noqdaan kuwa la maareyn karo si fudud oo nadiif ah.