Tengo el siguiente problema, tengo varios picker de react native, con un map para mostrar sus opciones, pero cuando cambio el valor de uno se me cambia en los demás porque tengo el mismo estado para todos como haría para manejar un estado para cada picker, teniendo en cuenta que el numero de picker tambien es dinámico (puede ser n)...
import React, { useState } from "react";
import { View, Picker, StyleSheet } from "react-native";
const App = () => {
const [selectedValue, setSelectedValue] = useState("");
const data = [
{id: '1', color: 'azul'},
{id: '2', color: 'rojo'},
{id: '3', color: 'verde'},
{id: '4', color: 'amarillo'}
];
return (
<View>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
{data.map(dato => {
return (<Picker.Item value={dato.id} label={dato.color} key={dato.id} />)
})
}
</Picker>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
{data.map(dato => {
return (<Picker.Item value={dato.id} label={dato.color} key={dato.id} />)
})
}
</Picker>
<Picker
selectedValue={selectedValue}
style={{ height: 50, width: 150 }}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
{data.map(dato => {
return (<Picker.Item value={dato.id} label={dato.color} key={dato.id} />)
})
}
</Picker>
</View>
);
}
export default App;