مثال لتمرير مصفوفة عن طريق useState

مثال بسيط باستخدام React و useState لتمرير مصفوفة من الفواكه وعرضها في قائمة. كما سيمكن المستخدم من إضافة عناصر جديدة إلى القائمة.


import React, { useState } from 'react';

function FruitList() {
  // تعريف حالة الفواكه
  const [fruits, setFruits] = useState(['تفاح', 'موز', 'برتقال']);
  const [newFruit, setNewFruit] = useState('');

  // دالة لإضافة فاكهة جديدة إلى القائمة
  const addFruit = () => {
    if (newFruit.trim() !== '') {
      setFruits([...fruits, newFruit]);
      setNewFruit(''); // إعادة تعيين الحقل النصي
    }
  };

  return (
    <div>
      <h1>قائمة الفواكه</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newFruit}
        onChange={(e) => setNewFruit(e.target.value)}
        placeholder="أضف فاكهة جديدة"
      />
      <button onClick={addFruit}>إضافة</button>
    </div>
  );
}

export default FruitList;


في هذا المثال:

  1. نستخدم useState لتعريف حالة fruits التي تحتوي على مصفوفة من الفواكه.
  2. نستخدم useState أيضًا لتعريف حالة newFruit التي تخزن الفاكهة الجديدة التي يريد المستخدم إضافتها.
  3. دالة addFruit تضيف الفاكهة الجديدة إلى المصفوفة إذا لم تكن فارغة.
  4. يتم عرض الفواكه في قائمة غير مرتبة (ul)، وكل فاكهة في عنصر قائمة (li).
  5. يوجد حقل نصي لإدخال الفاكهة الجديدة وزر لإضافتها إلى القائمة.



هنا سأضيف زر الحذف لكل فاكهة وأستخدم دالة filter لحذف الفاكهة من القائمة. إليك الكود المعدل:

import React, { useState } from 'react';

function FruitList() {
  // تعريف حالة الفواكه
  const [fruits, setFruits] = useState(['تفاح', 'موز', 'برتقال']);
  const [newFruit, setNewFruit] = useState('');

  // دالة لإضافة فاكهة جديدة إلى القائمة
  const addFruit = () => {
    if (newFruit.trim() !== '') {
      setFruits([...fruits, newFruit]);
      setNewFruit(''); // إعادة تعيين الحقل النصي
    }
  };

  // دالة لحذف فاكهة من القائمة
  const deleteFruit = (fruitToDelete) => {
    setFruits(fruits.filter(fruit => fruit !== fruitToDelete));
  };

  return (
    <div>
      <h1>قائمة الفواكه</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>
            {fruit}
            <button onClick={() => deleteFruit(fruit)}>حذف</button>
          </li>
        ))}
      </ul>
      <input
        type="text"
        value={newFruit}
        onChange={(e) => setNewFruit(e.target.value)}
        placeholder="أضف فاكهة جديدة"
      />
      <button onClick={addFruit}>إضافة</button>
    </div>
  );
}

export default FruitList;


في هذا المثال:

  1. أضفنا دالة deleteFruit التي تستخدم filter لإزالة الفاكهة المحددة من المصفوفة.
  2. أضفنا زر “حذف” بجانب كل فاكهة في القائمة، وعند النقر عليه يتم استدعاء دالة deleteFruit مع تمرير الفاكهة المراد حذفها.


هنا! سأضيف زر التعديل بجانب زر الحذف لكل فاكهة، وسأستخدم دالة map لتحديث الفاكهة في القائمة. إليك الكود المعدل:


import React, { useState } from 'react';

function FruitList() {
  // تعريف حالة الفواكه
  const [fruits, setFruits] = useState(['تفاح', 'موز', 'برتقال']);
  const [newFruit, setNewFruit] = useState('');
  const [editingFruit, setEditingFruit] = useState(null);
  const [editingValue, setEditingValue] = useState('');

  // دالة لإضافة فاكهة جديدة إلى القائمة
  const addFruit = () => {
    if (newFruit.trim() !== '') {
      setFruits([...fruits, newFruit]);
      setNewFruit(''); // إعادة تعيين الحقل النصي
    }
  };

  // دالة لحذف فاكهة من القائمة
  const deleteFruit = (fruitToDelete) => {
    setFruits(fruits.filter(fruit => fruit !== fruitToDelete));
  };

  // دالة لبدء تعديل فاكهة
  const startEditing = (fruit) => {
    setEditingFruit(fruit);
    setEditingValue(fruit);
  };

  // دالة لحفظ التعديلات
  const saveEdit = () => {
    setFruits(fruits.map(fruit => (fruit === editingFruit ? editingValue : fruit)));
    setEditingFruit(null);
    setEditingValue('');
  };

  return (
    <div>
      <h1>قائمة الفواكه</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>
            {editingFruit === fruit ? (
              <input
                type="text"
                value={editingValue}
                onChange={(e) => setEditingValue(e.target.value)}
              />
            ) : (
              fruit
            )}
            {editingFruit === fruit ? (
              <button onClick={saveEdit}>حفظ</button>
            ) : (
              <button onClick={() => startEditing(fruit)}>تعديل</button>
            )}
            <button onClick={() => deleteFruit(fruit)}>حذف</button>
          </li>
        ))}
      </ul>
      <input
        type="text"
        value={newFruit}
        onChange={(e) => setNewFruit(e.target.value)}
        placeholder="أضف فاكهة جديدة"
      />
      <button onClick={addFruit}>إضافة</button>
    </div>
  );
}

export default FruitList;



في هذا المثال:

  1. أضفنا حالة editingFruit لتحديد الفاكهة التي يتم تعديلها حاليًا، وحالة editingValue لتخزين القيمة الجديدة.
  2. دالة startEditing تبدأ عملية التعديل وتعين الفاكهة المراد تعديلها.
  3. دالة saveEdit تحفظ التعديلات باستخدام map لتحديث الفاكهة في المصفوفة.
  4. عند تعديل فاكهة، يظهر حقل نصي وزر “حفظ” بدلاً من اسم الفاكهة وزر “تعديل”.

تعليقات

المشاركات الشائعة

ما هو JSX في React؟

إضافة الأنماط في React

المكونات (Components) في React

هيكلة المشروع في React

مثال بسيط يوضح كيفية استخدام createContext و useContext لتمرير البيانات بين المكونات في React

مفهوم إعادة الاستخدام (Reusability)

الأمر npx create-react-app my-app

عرض القوائم باستخدام JSX في React.

شرح Object Destructuring