I've got a dropdown, and setValue to setValue of value to the selection of the dropdown. I've also got a text element that should display the value whenever the dropdown is changed, but when I change the dropdown it doesn't update the Text and it stays blank? This is the dropdown I am using https://www.npmjs.com/package/react-native-element-dropdown

const App = () => {
  const [products, setProducts] = useState<ProductType[] | []>([]);
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(' ');
  const [isFocus, setIsFocus] = useState(false);

 
  const getProducts = async () => {
    try {
      const response = await axios.get('http://192.168.1.32:3000/api/products');
      setProducts(response.data);
    } catch (error) {
      // handle error
      alert('no');
    }
  };

  React.useEffect(() => {
    getProducts();
  }, []);


  return (
    <>
      <AppBar
        title="App"
        trailing={props => (
          <Button
            variant="text"
            title="ADD"
            compact
            //onPress={getProducts}
            style={{marginEnd: 4}}
            {...props}
          />
        )}
      />

      <Dropdown
        style={[styles.dropdown, isFocus && {borderColor: 'blue'}]}
        data={products}
        search
        maxHeight={300}
        labelField="product"
        valueField="aisle"
        placeholder={!isFocus ? 'Select item' : '...'}
        searchPlaceholder="Search..."
        value={value}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        onChange={item => {
          setValue(item.value);
          setIsFocus(false);
        }}
      />
      <TextInput label="quantity" variant="standard" />
      <Text>value: {value}</Text>
    </>
  );
};
export default App;

const styles = StyleSheet.create({
  dropdown: {
    height: 50,
    borderColor: 'gray',
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 8,
  },
  row: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
});

CodePudding user response：

I think that the onChange function is being fired and the value setValue is receiving is the problem, not the Dropdown component.

I've recreated your code (removed the AppBar for simplicity) and replaced your api with dummyjson and this code worked:

const App = () => {
  const [products, setProducts] = useState([]);
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(' ');
  const [isFocus, setIsFocus] = useState(false);

 
  const getProducts = async () => {
    try {
      const response = await axios.get('https://dummyjson.com/products');
      setProducts(response.data.products);
    } catch (error) {
      // handle error
      alert('Oh no','...');
    }
  };

  React.useEffect(() => {
    getProducts();
  }, []);


  return (
    <>
      <Dropdown
        style={[styles.dropdown, isFocus && {borderColor: 'blue'}]}
        data={products}
        search
        maxHeight={300}
        labelField="title"
        valueField="title"
        placeholder={!isFocus ? 'Select item' : '...'}
        searchPlaceholder="Search..."
        value={value}
        onFocus={() => setIsFocus(true)}
        onBlur={() => setIsFocus(false)}
        onChange={item => {
          setValue(item.title);
          setIsFocus(false);
        }}
      />
      <TextInput label="quantity" variant="standard" />
      <Text>value: {value}</Text>
    </>
  );
};
export default App;

I see that aisle is the value you gave to the valueField. Did you mean to do setValue(item.aisle) and not setValue(item.value)?

If item.value is what you want then verify that it isnt an empty string. Log it in your onChange function.