CODEWITHSUNDEEP
reactjs
karthik
karthik

Reputation: 21

Hide Dropdown based on condtional rendering in reactjs

I want to hide or show dropdown based on URL change using conditional rendering in react js.

 this.state = {
path:['/user-list','role-list','facility-list','system-types','crop-list','task-category-list']
};


{this.state.path?
              <select id="facility_id" className="form-control select2"  value={this.state.selected_facility_id} onChange={this.handleChange} title="Type of system">
              {/*  <Switch >  
                  <Route path='/production-list' exact component={ProductionList}/>  */}
                {this.state.facilities.map((faci, key) =>
                  <option key={key} value={faci.facility_id}>{faci.facility_name}</option>
                  // <DropdownItem>{faci.facility_name}</DropdownItem>

                )}
              {/*  </Switch> */}
              </select>
            :null}

The URL which i dont want to show dropdown , i have saved as array . How to do render ? I am new to react js.

Upvotes: 0

Views: 221

Answers (1)

Naveen Kashyap
Naveen Kashyap

Reputation: 372

you can use window.location object to check for route in state array or use props.history provided by react-router-dom

this.state = {
        path:['/user-list','role-list','facility-list','system-types','crop-list','task-category-list']
    };
    
{
!this.state.path.includes(window.location.pathname)?
   <select id="facility_id" className="form-control select2"  value={this.state.selected_facility_id} onChange={this.handleChange} title="Type of system">
    {/*  <Switch >  
     <Route path='/production-list' exact component={ProductionList}/>  */}
      {this.state.facilities.map((faci, key) =>
       <option key={key} value={faci.facility_id}>{faci.facility_name}</option>
      // <DropdownItem>{faci.facility_name}</DropdownItem>
    )}
      {/*  </Switch> */}
       </select>
       : null
}

Upvotes: 1

Related Questions