إضافة الخيار ديناميكيًا لقائمة منسدله في react.js

يمكنك تخزين العناصر في حالة (state)

const [list,setLits] = useState([//ضع هنا قيمة القائمة الإبتدائية//]);

وعندما تريد أن تضيف عنصر ما تقم فقط بتعديل هذه القائمة التي في الحالة(state)

const addItem = (name)=>{
	setList(list.concat(name))
}

لم أفهم ما تقصده بالضبط لكن حسب ما فهمت أنك تريد خيارات للاختيار وطريقة لإضافة الخيارات ديناميكيا اولا لتسهيل الامر هناك مكتبة تدعى react-select يمكنك استخدامها ستوفر عليك بعض المتاعب

import React from 'react';

import Select from 'react-select';
import makeAnimated from 'react-select/animated';
import { colourOptions } from '../data';

const animatedComponents = makeAnimated();

export default function AnimatedMulti() {
  return (
    <Select
      closeMenuOnSelect={false}
      components={animatedComponents}
      defaultValue={[colourOptions[4], colourOptions[5]]}
      isMulti
      options={colourOptions}
    />
  );
}

في المثال السابق الخيارات تأتي من array محلي مستورد من data لكن في مشروع عملي وواقعي أنت تريد مثلا أن تأتي الخيارات من سيرفر مثلا لديك مجالات عمل يمكنك أن تعمل موديل للمجالات في قاعدة البيانات وطريقة لإضافة مجالات العمل وجلبهم وعندما يكون لديك endpoint لجلب المجالات يمكنك استخدامها لجلبهم ووضعهم مكان data فوق في المثال في هذه الحالة عند اضافة أي مجال سيتم تحديث القائمة المنسدلة بالمجالات المضافة وهكذا لديك عملية ديناميكا

بتاريخ 6 ساعات قال شرف الدين2:

يمكنك تخزين العناصر في حالة (state)

const [list,setLits] = useState([//ضع هنا قيمة القائمة الإبتدائية//]);

وعندما تريد أن تضيف عنصر ما تقم فقط بتعديل هذه القائمة التي في الحالة(state)

const addItem = (name)=>{
	setList(list.concat(name))
}

 

شكرا @شرف الدين-2

لكن قبل ذلك كيف لنا ان نربط الخيارات بالمصفوفه ؟

بتاريخ 1 ساعة قال Salah Eddin Berriani:

لم أفهم ما تقصده بالضبط لكن حسب ما فهمت أنك تريد خيارات للاختيار وطريقة لإضافة الخيارات ديناميكيا اولا لتسهيل الامر هناك مكتبة تدعى react-select يمكنك استخدامها ستوفر عليك بعض المتاعب

import React from 'react';

import Select from 'react-select';
import makeAnimated from 'react-select/animated';
import { colourOptions } from '../data';

const animatedComponents = makeAnimated();

export default function AnimatedMulti() {
  return (
    <Select
      closeMenuOnSelect={false}
      components={animatedComponents}
      defaultValue={[colourOptions[4], colourOptions[5]]}
      isMulti
      options={colourOptions}
    />
  );
}

في المثال السابق الخيارات تأتي من array محلي مستورد من data لكن في مشروع عملي وواقعي أنت تريد مثلا أن تأتي الخيارات من سيرفر مثلا لديك مجالات عمل يمكنك أن تعمل موديل للمجالات في قاعدة البيانات وطريقة لإضافة مجالات العمل وجلبهم وعندما يكون لديك endpoint لجلب المجالات يمكنك استخدامها لجلبهم ووضعهم مكان data فوق في المثال في هذه الحالة عند اضافة أي مجال سيتم تحديث القائمة المنسدلة بالمجالات المضافة وهكذا لديك عملية ديناميكا

@Salah Eddin Berriani بالظبط هذا ما كنت اقصده 

قد يكون هذا مفيدا لشخص متقدم شيء ما  فالذي ذكرته لم استوعبه جيدا ومن المؤكد انه مفيد لي في وقت لاحق 
لكن انا افضل تعلم الطريقه من دون مكتبه