CODEWITHSUNDEEP
reactjsionic-framework
RadwanAnik
RadwanAnik

Reputation: 61

show input field when other option is selected from select box using ionic react

Using Ionic and React, I want to give user an option to enter Add Location field when they select option 'Other' from Location field select box.

                <IonItem lines="none">
                  <IonLabel position="stacked">Location</IonLabel>
                  <IonSelect>
                    <IonSelectOption value="dhaka">Dhaka</IonSelectOption>
                    <IonSelectOption value="cumilla">
                      Cumilla
                    </IonSelectOption>
                    <IonSelectOption value="barisal">
                      Barisal
                    </IonSelectOption>
                    <IonSelectOption value="sylet">Sylet</IonSelectOption>
                    <IonSelectOption value="other">Other</IonSelectOption>
                  </IonSelect>
                </IonItem>

                <IonItem lines="none">
                  <IonLabel position="stacked">Add Location</IonLabel>
                  <IonInput type="text" className="custom-input"></IonInput>
                </IonItem>

Upvotes: 1

Views: 1975

Answers (1)

b3hr4d
b3hr4d

Reputation: 4588

ill give u idea :

const Options = ()=>{
 const [select,setSelect]= React.useState();

  //handler function
 const handleCapacity=(e)=>{
   setSelect(e.target.value);
 }
 return (
  <React.Fragment>
    <select value={select} onChange={handleCapacity}>
          <option>1</option>
          <option>2</option>
          <option>other</option>
    </select>
    {select==="other"&& <input type="text"/>}
   </React.Fragment>
 )
}

ReactDOM.render(
  <Options />,
  document.getElementById("react")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 1

Related Questions