如何处理“react-select”Select 元素的数组属性的 OnChange？

Question

How to Handle Onchange set e.value to 'prodId' only.

I want to set onChange for property 'prodId' of the array of object using Select element of 'react-select'

I know it take value in e.value but dont know how to do in array of object.

OR can I create 'prodId' usestate array variable separately and after select values push it to the 'Product_Details' array.

Please help in this!

I have Array Of Object like this:-

  const [Product_Details, setProduct_Details] = useState([]);

useEffect(() => {
    if (BillIdFetch === undefined) return;
    setProduct_Details([
      {
        index: Math.random(),
        billId: BillIdFetch,

//I want to handle OnChange for this property on react-select.
        prodId: "",
        price: "",
        prod_SrNo: "",
        discount: "0",
        Qty : "1",
        Prod_Status: "NULL",
        proData_warranty_In_Prcnt: "NULL",
        Credit_Note: "NULL",
        Replacement: "NULL",
       
      },
    ]);
  }, [BillIdFetch]);

I Created handle Input function for handle input onchange event triggered but in this i cant set value of 'prodId' bcoz it take e.value.

handleInput() :-

const handleProductDetailsInputs = (index, e) => {

    const Pdetails = [...Product_Details];
    Pdetails[index][e.target.name] = e.target.value;

    setProduct_Details(Pdetails);
  
  };

return ()

 return (
    <>
                  <tr key={val.index}>
                                <td>

                                <Select
                                    key={val.id}
                                    required
                                    class="form-select"
                                    id={prodId}
                                    data-id={idx}
                                    name="prodId"
                                    onChange={(e) => handleProductDetailsInputs(idx, e)}
                                    options={Select_Product_Options}
                                />

                                </td>
                   </tr>
<>)

Answer 1

I didn't understand your question completely. but if you are trying to make options from data fetched from API then here it is how I am doing by using 'react-select' package:

  const [selectedOption, setSelectedOption] = useState(null)
  const [clientsData, setClientsData] = useState([]) // coming from api

  const clientIdOptions = clientsData.map((row) => {
    return { value: row.id, label: row.lead_name }
  })

  return (
    <Select isSearchable defaultValue={selectedOption} onChange={setSelectedOption} options={clientIdOptions} />
  )