React Native Picker, get selectedValue

Question

I have a Picker component like this:

const reasons = [
  { name: 'A' },
  { name: 'B' },
  { name: 'Other' }
];

<Picker
  selectedValue={state.reasonSelected}
  onValueChange={value => {
    changeTransactionReason(value);
  }}
>
  {reasons.map((reason, key) => (
    <Picker.Item
      key={key}
      label={reason.name}
      value={reason.name}
    />
  ))}
</Picker>

Then, I need to render an Input component only if the item "Other" is picked.

I could setState that value and then ask if:

{state.itemSelected === 'Other' && (
  <Input onChangeText={text => { reduxActionToSaveValue(text) }}/>
)}

But I don't want to mix local state and redux. The values will be stored on redux, but

How can I compare the value 'Other' without losing it actual value? So I want to know if there's a way with Picker to get the selected value without setting local states

Answer 1

if you don't want to use redux, you need to get the Other value from props and initialize the value on the picker. Regards

Only with redux I would do this:

I would create a reducer reasons

const intialState = {
  reasonSelected: '1',
  reasons: [{name: '1'}, {name: '2'}, {name: '3'}],
};

const reasons = (state = intialState, {type, payload}) => {
  switch (type) {
    case 'CHANGE_SELECTED':
      return payload;
    default:
      return state;
  }
};

export default reasons;

In this reducer I would initialize values and the selecteddefault and I would create an action CHANGE_SLECTEd to change the value selected.

and in the component I would call the reducer, I called Dashboard.

import React from 'react';
import {View, Text, Picker} from 'react-native';

import {useSelector, useDispatch} from 'react-redux';

const Dashboard = () => {
  const reasonObj = useSelector((state) => state.reasons);

  const dispatch = useDispatch();

  const onValuePickChange = (value) => {
    dispatch({
      type: 'CHANGE_SELECTED',
      payload: {
        reasonSelected: value,
        reasons: reasonObj.reasons,
      },
    });
  };
  return (
    <View>
      <Text>Dashboard</Text>
      <Picker
        selectedValue={reasonObj.reasonSelected}
        onValueChange={(value) => onValuePickChange(value)}>
        {reasonObj.reasons.length > 0 &&
          reasonObj.reasons.map((reason, key) => (
            <Picker.Item key={key} label={reason.name} value={reason.name} />
          ))}
      </Picker>
    </View>
  );
};

export default Dashboard;

inthis form you are not using local state and everything is immediately update to redux.

I hope this info will help you... Regards

Answer 2

Why not compare the value directly with redux? if you are using react-redux you can map the value where selected item is stored using mapStateToProps (here is the documentation) and if you are directly using redux you can still do it. then once the action of choosing other has dispatched and the value is set your input will show.