CODEWITHSUNDEEP
react-nativereact-hooksfetch-apipicker
asunawesker
asunawesker

Reputation: 21

Dynamic picker fetching data

I'm having some issues when I'm trying to do a dynamic picker.

First I'm fetching some data and everything it's ok at that point, the problem is when I want to use that data because in the picker says:

TypeError: undefined is not an object (evaluating 'items.map')

What can I do?

const [items, setItems] = React.useState();
const [data, setData] = React.useState();

React.useEffect(() => {     
    function getCharacters() {
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(response => response.json())
        .then(async(data) => {
            const mapArray = data.map(({ name, email }) => ({ label: name, value: email }));
            setItems(mapArray);
            console.log('Done');
        })
    }
    getCharacters();
},[]);

This is my picker

<Picker
    selectedValue={data}
    onValueChange={item => setData(item)}
>
    {items.map((item,index)=> {
        return(
            <Picker.Item 
                key={index} 
                label = {item.label} 
                value = {item.email} 
            />
        )}
    )
}

Upvotes: 0

Views: 187

Answers (1)

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

Set default value initially

const [items, setItems] = React.useState([]);

Upvotes: 1

Related Questions