Change value of only selected Select dropdown in React

[SharfMohiuddin]

I am trying to add multiple DropDowns using .map and Select dropdown fields by clicking a button.

When I am changing the dropdown value for one it changes for all because of useState all the values of the rest of the Select options are also changing.

I only want the value of the Select dropdown to change which I am changing manually.

[SharfMohiuddin]

[SharfMohiuddin]

{prevArr .filter((item) => item.id == holeCount) .map((lm, idx) => ( <View key={idx} style={{ height: 49, backgroundColor: "white", width: "100%", flexDirection: "row", }}

<View style={{ width: "20%", justifyContent: "center", alignItems: "center", borderWidth: 0.3, borderColor: "black", }}

{idx + 1}

<View onPress={() => setActiveCell(idx + 1)} style={{ width: "30%", justifyContent: "center", alignItems: "center", borderWidth: 0.3, borderColor: "black", }}

<DropDownPicker open={open} // onOpen={onGenderOpen} items={categories} placeholder="Holes" setOpen={setOpen} value={holeId} setValue={setHoleId} onSelectItem={(item) => ourIDX(item, idx)} zIndex={3000} setItems={setCategories} zIndexInverse={1000} /> {/ {idx == 0 ? "Tee" : ""} */} <View style={{ width: "50%", justifyContent: "center", alignItems: "center", borderWidth: 0.3, borderColor: "black", }}

{activeCell}

))}

[Ario99]

@SharfMohiuddin I think your problem is that you only have one state and are trying to use it for each one. The way I'd recommend to solve this is using useReducer. Here's a good example, you'll have to adjust it so that it works for your array. https://www.cluemediator.com/usereducer-hook-for-multiple-states-in-the-react