CODEWITHSUNDEEP
reactjsreact-nativepicker
Malaury Boudon
Malaury Boudon

Reputation: 732

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

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

Upvotes: 0

Views: 398

Answers (1)

Stuck
Stuck

Reputation: 12292

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} />

Upvotes: 1

Related Questions