title: ReactJs | Show only the selected value in URL
body: <p>I am new to reatJS. Can some genius please help me with my issue?
  I am developing a e-pharmacy website where I let the users to first select a preferred districts and select a pharmacy from that area. I list out all the districts along with a drop down menu which shows all the pharmacies in that district. Then the user can make orders to the selected pharmacy.
  I pass the selected pharmacy Id through the URL when user post an order.</p>
  <p>If I had 3 districts, and I have selected a pharmacy from the third district, the URL appears like this:</p>
  <p>http://localhost:3000/uploadlist?phmcy=&amp;phmcy=&amp;phmcy=1 (here the id of the selected pharmacy is &quot;1&quot;)</p>
  <p>The URL shows all the unselected values also. My preference is to display only the selected pharmacy's Id.
  I want only the selected value to be displayed. Like this:</p>
  <p>http://localhost:3000/uploadlist?phmcy=1</p>
  <p>Here is my codes:</p>
  <p>The district component: (Where the customer can select a district)</p>
  <pre><code>import React,{ Component } from 'react';
  //import { Router } from 'react-router-dom/cjs/react-router-dom.min';
  import { Link, withRouter } from &quot;react-router-dom&quot;;
  import './district.css';
  import Upload from &quot;./upload.component&quot;;
  import Districtpharmacy from &quot;./districtpharmacy.component&quot;;
  class District extends React.Component{
      state = {
          pharmacy: []
        };
      
      render(){
          return(
  
              &lt;div className=&quot;container&quot;&gt;
  
                  &lt;div className=&quot;container district&quot;&gt;
                  &lt;form action=&quot;/uploadlist&quot; method=&quot;get&quot;&gt;
                      &lt;div className=&quot;row&quot;&gt;
                          &lt;div className=&quot;container header&quot;&gt;
                          &lt;h1&gt;Select your District and Nearby Pharmacy&lt;/h1&gt;
                          &lt;p&gt;Please select only one pharmacy&lt;/p&gt;
                          &lt;/div&gt;                 
                      &lt;/div&gt;
                      
                  &lt;div className=&quot;row&quot;&gt;
                 &lt;div className=&quot;form-column&quot;&gt;
                  &lt;Districtpharmacy district=&quot;Mathara&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Galle&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Hambantota&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Kalutara&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Colombo&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Gampaha&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Rathnapura&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Kurunegala&quot;/&gt;
                  &lt;/div&gt;
              
                  &lt;div className=&quot;form-column&quot;&gt;
                  &lt;Districtpharmacy district=&quot;Monaragala&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Anuradhapura&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Polonnaruwa&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Kandy&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Nuwara Eliya&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Kegalla&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Matale&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Badulla&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Ampara&quot;/&gt;
                  &lt;/div&gt;
                 
                  &lt;div className=&quot;form-column&quot;&gt;
                  &lt;Districtpharmacy district=&quot;Puttalam&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Trincomalee&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Batticaloa&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Mannar&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Vavuniya&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Mulaitivu&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Kilinochchi&quot;/&gt;
                  &lt;Districtpharmacy district=&quot;Jaffna&quot;/&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  
                      &lt;br/&gt;
                      &lt;button type=&quot;submit&quot; &gt;Add&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt; 
  
          
          );
      }
  }
  
  export default withRouter(District);
  </code></pre>
  <p>district.pharmacy component: (where the dropdown menu is returned.)</p>
  <pre><code>import React,{ Component } from 'react';
  //import { Router } from 'react-router-dom/cjs/react-router-dom.min';
  import { Link } from &quot;react-router-dom&quot;;
  import './district.css';
  //import Upload from &quot;./upload.component&quot;;
  class Districtpharmacy extends React.Component{
      state = {
          pharmacy: [],
          District: this.props.district
        };
        
          componentDidMount() {
            console.log(this.state)
            fetch(&quot;https://localhost:44357/api/Pharmacies?field=district&amp;value=&quot;+this.props.district)
              .then(response =&gt; response.json())
              .then(pharmacy =&gt; this.setState({pharmacy: pharmacy}));
              //console.log(this.state)
          }      
  
  render(){
     //console.log(this.state)
      const pharm=this.state.pharmacy.map((pharmacies) =&gt;{
      return(&lt;option value ={pharmacies.id}&gt;{pharmacies.pharmacyname},{pharmacies.address}&lt;/option&gt;)})
      return(
          &lt;div&gt;
          &lt;label class=&quot;label&quot; for=&quot;district&quot;&gt;&lt;span&gt;{this.props.district}&lt;/span&gt;&lt;/label&gt;
          &lt;select name=&quot;phmcy&quot; className=&quot;form-control select-dropdown&quot;&gt;&lt;option value=&quot;&quot;&gt;Select Pharmacy&lt;/option&gt;{pharm}&lt;/select&gt;
          &lt;/div&gt;
      )
  }
  }
  export default Districtpharmacy
  </code></pre>
  <p>Can someone help me with this?</p>
  <p>Edited:</p>
  <p>The order posting form:</p>
  <p>The parent file: (uploadlist.js)(the &quot;phmcy&quot; value is to be fetched from the url. this file is triggered after selecting the pharmacy)</p>
  <pre><code>export default function Uploadlist() {
      let myphmcy = (new URLSearchParams(window.location.search)).get(&quot;phmcy&quot;)
      
      console.log(myphmcy);
  
  
      const ordersAPI= (url='https://localhost:44357/api/Orders') =&gt; {
          return {
              fetchAll: () =&gt; axios.get(url),
              create: newRecord =&gt; axios.post(url, newRecord),
              update: (id, updateRecord) =&gt; axios.put(url + id, updateRecord),
              delete: id =&gt; axios.delete(url+id)
          }
      }
   
      const addOrEdit = (formData, onSuccess) =&gt; {
  
          ordersAPI().create(formData)
          .then(res =&gt; {
              onSuccess();
          })
          .catch(err =&gt; console.log(err.response.data))
      }
  
      return (
          &lt;div className=&quot;row&quot;&gt;
              &lt;div className=&quot;jumbotron jumbotron-fluid py-4 &quot;&gt;&lt;/div&gt;
              &lt;div className=&quot;container text&quot;&gt;
                  &lt;h1 className=&quot;display-4&quot;&gt; Order Register&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div className=&quot;col-md-4 offset-3&quot;&gt;
                  &lt;Upload //this is the child component where the order form is built.
                      addOrEdit = {addOrEdit}
                      myphmcy = {myphmcy}
                  /&gt;
                  &lt;/div&gt; 
                  &lt;div className=&quot;col-md-1&quot;&gt;
                      &lt;div&gt; &lt;/div&gt;
                  &lt;/div&gt;
              
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>the child file:</p>
  <pre><code>
  const initialFieldValues ={
      orderID:0, 
      date_time:'',
      status:'',
      status2:'',
      pharmacyName:'',
      customerName:'',
      patientName:'',
      patientAge:'',
      address:'',
      email:'',
      teleNo:'',
      customer_id:1,
      pharmacy_id:0,//data obtaind from the URL have to posted as the pharmacyID when posting. 
      image:'',
      imageSource:'',
      imageData: null
      
  }
  
  
  export default function Upload(props) {
  
      const {addOrEdit} = props
  
      const {myphmcy} = props
       console.log(myphmcy);
      const [values, setValues] = useState(initialFieldValues)
      const[errors, setErrors] = useState({})
  
      const handleInputChange= e =&gt; {
          const {name, value} = e.target;
          setValues({
              ...values,
              [name]:value
          })
          
      }
  
      /*const addOrEdit = (formData, onSuccess) =&gt; {
  
          ordersAPI().create(formData)
          .then(res =&gt; {
              onSuccess();
          })
          .catch(err =&gt; console.log(err.response.data))
      }*/
  
      const showPreview = e =&gt; {
          if(e.target.files &amp;&amp; e.target.files[0]){
              let imageData = e.target.files[0];
              const reader = new FileReader();
              reader.onload = x =&gt; {
                  setValues({
                      ...values,
                      imageData,
                      imageSource : x.target.result
                      
                  })
                  
              }
              reader.readAsDataURL(imageData)
          }
  
          else{
              setValues({
                  ...values,
                  imageData:null,
                  imageSource:''
              })
          }
  
      }
  
      const validate = () =&gt; {
          let temp = {}
          temp.customerName = values.customerName == &quot;&quot; ? false : true;
          setErrors(temp)
          return Object.values(temp).every(x =&gt; x == true)
      }
  
      const resetForm = () =&gt; {
          setValues(initialFieldValues)
          document.getElementById('image-uploader').value = null;
      }
  
      const handleFormSubmit = e =&gt; {
          e.preventDefault()
          if (validate()){
          
          const formData = new FormData()
          
          formData.append('orderID',values.orderID)
          formData.append('date_time',values.date_time)
          formData.append('status',values.status)
          formData.append('status2',values.status2)
          formData.append('pharmacyName',values.pharmacyName)
          formData.append('customerName',values.customerName)
          formData.append('patientName',values.patientName)
          formData.append('patientAge',values.patientAge)
          formData.append('address',values.address)
          formData.append('email',values.email)
          formData.append('teleNo',values.teleNo)
          formData.append('customer_id',values.customer_id)
          formData.append('pharmacy_id',myphmcy)
          formData.append('image',values.image)
          formData.append('imageData',values.ImageData)
          addOrEdit(formData, resetForm) 
  
          alert(&quot;Your file is being uploaded!&quot;)
      }
  }
  
  const applyErrorClass = field =&gt; ((field in errors &amp;&amp; errors[field] == false) ? ' invalid-field' : '')
  
  
      
  
      return (
          &lt;&gt;
          &lt;div className=&quot;container text-center &quot;&gt;
              &lt;p className=&quot;lead&quot;&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;form autoComplete=&quot;off&quot; noValidate onSubmit={handleFormSubmit}&gt;
              &lt;div className=&quot;card&quot;&gt;
                  &lt;div className=&quot;card-header text-center&quot;&gt;Place Your Order Here&lt;/div&gt;
              
              &lt;img src={values.imageSource} className=&quot;card-img-top&quot;/&gt;
  
                  &lt;div className=&quot;card-body&quot;&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input type=&quot;file&quot; accept=&quot;image/*&quot; className=&quot;form-control-file&quot; onChange={showPreview} id=&quot;image-uploader&quot;/&gt; 
                      &lt;/div&gt;
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input type=&quot;datetime-local&quot; className=&quot;form-control&quot; placeholder=&quot;Date Time&quot; name=&quot;date_time&quot; value={values.date_time}
                         onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input className=&quot;form-control&quot; placeholder=&quot;Enter the prescription items and qty&quot; name=&quot;status&quot; value={values.status} onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input className=&quot;form-control&quot; placeholder=&quot;What are the symptoms?&quot; name=&quot;status2&quot; value={values.status2} onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input className=&quot;form-control&quot; placeholder=&quot;Pharmacy Name&quot; name=&quot;pharmacyName&quot; value={values.pharmacyName} onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input className={&quot;form-control&quot; + applyErrorClass('customerName')}  placeholder=&quot;Your Name&quot; name=&quot;customerName&quot; value={values.customerName} onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input className=&quot;form-control&quot; placeholder=&quot;Patient Name&quot; name=&quot;patientName&quot; value={values.patientName} onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input className=&quot;form-control&quot; placeholder=&quot;Patient Age&quot; name=&quot;patientAge&quot; value={values.patientAge} onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input className=&quot;form-control&quot; placeholder=&quot;Delivery address&quot; name=&quot;address&quot; value={values.address} onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input className=&quot;form-control&quot; placeholder=&quot;Your Email&quot; name=&quot;email&quot; value={values.email} onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input className=&quot;form-control&quot; placeholder=&quot;Contact Number&quot; name=&quot;teleNo&quot; value={values.teleNo} onChange={ handleInputChange}/&gt;
                      &lt;/div&gt;
  
                      &lt;div className=&quot;form-group text-center&quot;&gt;
                          &lt;button type=&quot;submit&quot; className=&quot;btn btn-light&quot;&gt;submit&lt;/button&gt;
                          
                      &lt;/div&gt;
                      
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/&gt;
      )
  }
  </code></pre>
  <p>The codes are so long. but I have uploaded them all for a better understanding of my issue.</p>