كيفية إخفاء وإظهار العناصر في React

لإخفاء العناصر في React هناك منهجيتين إما إخفاءه باستخدام display: none أو عن طريق إزالته كليا من الصفحة باستخدام الشروط في React مثل {condition && (elements)}.

إخفاء وإظهار العناصر في React باستخدام CSS

المثال التالي يريك كيف يمكنك إخفاء وإظهار العناصر بشكل ديناميكي بإستخدام خاصية style:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <div
        style={{
          display: count <= 10 ? "" : "none",
        }}
      >
        Less or equals 10
      </div>

      <div
        style={{
          display: count > 10 ? "" : "none",
        }}
      >
        Greater than 10
      </div>

      <div>
        <input
          type="number"
          placeholder="Count value"
          onChange={({ target: { value } }) => setCount(value || 0)}
        />
      </div>
    </div>
  );
}

عند تغيير قيمة المتغير count لدينا شرط يتحقق ما إذا كان الرقم أكبر أو اصغر من الرقم 10.

يعتبر هذا الإختيار الأفضل في حالة كنت تريد إضافة بعض التأثيرات animation قبل حذف العنصر من الصفحة.

إخفاء وإظهار العناصر في React بإزالة العنصر من الصفحة

المثال التالي يريك كيف يمكنك إخفاء وإظهار العناصر عن طريق ازالتها بشكل ديناميكي:

import { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      {count <= 10 ? <div>Less or equals 10</div> : <div>Greater than 10</div>}

      <div>
        <input
          type="number"
          placeholder="Count value"
          onChange={({ target: { value } }) => setCount(value || 0)}
        />
      </div>
    </div>
  );
}

يعتبر هذا الإختيار الأفضل عند ازالة او اضافة عنصر إلى الصفحة، حيث يمكنك من قراءة الأكواد بشكل أفضل.