How to make change on picker value with Picker when the picker items are mapped?

Question

I don't success to change the value selected of the picker. When I click on other value it change correctly and after 0.2 sec it put the first value again. I don't know why...

Could you help me please?

 const [espaceSelected, setEspaceSelected] = useState(null);

    useEffect(() => {
        getEspaces().then(data => {
            setEspaces(data);
            AsyncStorage.setItem('id_espace',espaces[0].id_espace);
            setEspaceSelected(espaces[2].name);
        })
    }, []);

...
return ( ...
  <Picker selectedValue={espaceSelected ? espaceSelected : null} onValueChange={(value) => { setEspaceSelected(value.name);}}>
                {espaces ? espaces.map(e => {
                    return (
                        <Picker.Item color="#7B65AE" label={e.name} value={e.id_espace} />);
                }) : null}
            </Picker>
);

Thanks in advance

Answer 1

In the render code for the Picker you set the value to value={e.id_espace} and then try to access the value.name in the onValueChange , but the value is only the id and not the object having an id and the name .

For example you can fix it, by using the name everywhere and not mixing it with the id or the object:

...onValueChange={(name) => { setEspaceSelected(name); }} ...
...
<Picker.Item color="#7B65AE" label={e.name} value={e.name} />