Conditional rendering of two TextInputs in a react native picker

Question

I'm using react native picker that has two labels,BuyandSell such that when one selects the label Buy, a text input with the value of BuyThreshhold is shown below and when the label Sell is selected, a textInput with the value of SellThreshhold is rendered below the picker. The two textInputs are not to be displayed at the same time. Below is my Code:

// Hook for the picker component
       const [selectedValue, setSelectedValue] = useState("Buy");
    // Hook for the textInputs
       const [BuyThreshhold, setBuyThreshhold] = useState(0)
       const [SellThreshhold, setSellThreshhold] = useState(0)
    
    
    <Picker
                  mode= "dropdown"
            selectedValue={selectedValue}
            style={{ height: 50, width: 150 }}
            onValueChange={(itemValue, itemIndex) =>setSelectedValue(itemValue) }
          >
            <Picker.Item label="Buy" value={currency.data.prices[clickedindex].closeoutAsk} />
            <Picker.Item label="Sell" value={currency.data.prices[clickedindex].closeoutBid} />
            
          </Picker>
    
    <TextInput
                      style={{backgroundColor: "lightgrey", borderRadius: 5, width: 100, height: 50, textAlign: "center"}}
                      value={BuyThreshhold}
                      onChangeText = {(BuyThreshhold) => setBuyThreshhold(BuyThreshhold)}
                      placeholder="BuyThreshold"
                      keyboardType="decimal-pad"
                      placeholderTextColor="#60605e"
                    />
    
                     <TextInput
                      style={{backgroundColor: "lightgrey", borderRadius: 5, width: 100, height: 50, textAlign: "center"}}
                      value={SellThreshhold}
                      onChangeText = {(SellThreshhold) => setSellThreshhold(SellThreshhold)}
                      placeholder="SellThreshold"
                      keyboardType="decimal-pad"
                      placeholderTextColor="#60605e"
                       />
                              

Answer 1

Try this

// Hook for the picker component
       const [selectedValue, setSelectedValue] = useState("Buy");
    // Hook for the textInputs
       const [BuyThreshhold, setBuyThreshhold] = useState(0)
       const [SellThreshhold, setSellThreshhold] = useState(0)
    
    
    <Picker
                  mode= "dropdown"
            selectedValue={selectedValue}
            style={{ height: 50, width: 150 }}
            onValueChange={(itemValue, itemIndex) =>setSelectedValue(itemValue) }
          >
            <Picker.Item label="Buy" value="Buy" /> <!-- Update for testing -->
            <Picker.Item label="Sell" value="Sell" />
            
          </Picker>
    
    {selectedValue === "Buy" ? <TextInput
                      style={{backgroundColor: "lightgrey", borderRadius: 5, width: 100, height: 50, textAlign: "center"}}
                      value={BuyThreshhold}
                      onChangeText = {(BuyThreshhold) => setBuyThreshhold(BuyThreshhold)}
                      placeholder="BuyThreshold"
                      keyboardType="decimal-pad"
                      placeholderTextColor="#60605e"
                    /> :
    
                     <TextInput
                      style={{backgroundColor: "lightgrey", borderRadius: 5, width: 100, height: 50, textAlign: "center"}}
                      value={SellThreshhold}
                      onChangeText = {(SellThreshhold) => setSellThreshhold(SellThreshhold)}
                      placeholder="SellThreshold"
                      keyboardType="decimal-pad"
                      placeholderTextColor="#60605e"
                       />
    }

Answer 2

What you have to do is display the respective input component based on the Picker value. In your case, the value of "selectedValue". you can use ternary operator to achieve this This is how you can do:

// Hook for the picker component
const [selectedValue, setSelectedValue] = useState("Buy");
// Hook for the textInputs
const [BuyThreshhold, setBuyThreshhold] = useState(0)
const [SellThreshhold, setSellThreshhold] = useState(0)

return ( 
 <>
  <Picker mode = "dropdown"
  selectedValue = {
    selectedValue
  }
  style = {
    {
      height: 50,
      width: 150
    }
  }
  onValueChange = {
    (itemValue, itemIndex) => setSelectedValue(itemValue)
  } 
  >
  <Picker.Item label = "Buy"
  value = {
    currency.data.prices[clickedindex].closeoutAsk
  }
  /> 
  <Picker.Item label = "Sell"
  value = {
    currency.data.prices[clickedindex].closeoutBid
  }
  />

  </Picker> 

  {
    selectedValue === "Buy" ?
      <TextInput
    style = {
      {
        backgroundColor: "lightgrey",
        borderRadius: 5,
        width: 100,
        height: 50,
        textAlign: "center"
      }
    }
    value = {
      BuyThreshhold
    }
    onChangeText = {
      (BuyThreshhold) => setBuyThreshhold(BuyThreshhold)
    }
    placeholder = "BuyThreshold"
    keyboardType = "decimal-pad"
    placeholderTextColor = "#60605e" 
      />
      :
      <TextInput
    style = {
      {
        backgroundColor: "lightgrey",
        borderRadius: 5,
        width: 100,
        height: 50,
        textAlign: "center"
      }
    }
    value = {
      SellThreshhold
    }
    onChangeText = {
      (SellThreshhold) => setSellThreshhold(SellThreshhold)
    }
    placeholder = "SellThreshold"
    keyboardType = "decimal-pad"
    placeholderTextColor = "#60605e" 
    />
  } 
  </>
)