CODEWITHSUNDEEP
reactjsreact-native
widjajayd
widjajayd

Reputation: 6253

React native picker cannot be changed although click to other options

I'm new to react native, I'm trying to show dropdown using react picker

I can successfully showing label, the problem is every time I choose the item, it's always back to first option here is my code

import React, { useState, useEffect } from 'react';
import { Text, TextInput, StyleSheet, View, Button, Picker } from 'react-native';
import NewsPost from '../hooks/NewsPost'
import CategoriesGet from '../hooks/CategoriesGet'

const CreateScreen = ({ navigation }) => {
      const [category_id, setCategoryID] = useState(0)
      const [categoriesGetApi, categories, errorMessageCategory] = CategoriesGet()
      const [newsPostApi, errorMessage] = NewsPost()

      useEffect(() => {
        categoriesGetApi()
      }, [])

    <Picker
      style={{height: 50, width:200}}
      mode="dropdown"
      selectedValue={category_id}
      onValueChange={ itemValue => {
        setCategoryID({itemValue})
        console.log({itemValue})
      }}
    >
      {
        categories.map((item) => {
          return(
            <Picker.Item 
              label={item.attributes.name}
              value={item.attributes.id}
              key={item.attributes.id} />
          )
        })
      }
    </Picker>

categories that I loop using map is an array of objects

[
  {"attributes": {"id": 1, "name": "Sport"}, "id": "1", "type": "category"}, 
  {"attributes": {"id": 2, "name": "Politics"}, "id": "2", "type": "category"}, 
  {"attributes": {"id": 3, "name": "Entertainment"}, "id": "3", "type": "category"}
]

Upvotes: 0

Views: 693

Answers (1)

Brian Thompson
Brian Thompson

Reputation: 14355

It looks like you're setting the category_id to an object {itemValue: itemValue}, instead of just the value.

Change setCategoryID({itemValue}) to setCategoryID(itemValue).

I also don't see where categoryName is coming from. Should it be category_id?

Upvotes: 1

Related Questions