select options wont show in react

Question

I have a list of cities and I want them to be selectable. But it wont even show. when I remove the first <Col> (just the col not the content of it) it works well so the problem is that col but I dont know why: here is my code:

  function SearchBar() {
    const [open , setOpen] = useState(true)

      const cities= [
        {value:'tehran' , label:'tehran'},
        {value:'Esfehan' , label:'Esfehan'},
        {value:'Qom' , label:'Qom'},
        {value:'Mashhad' , label:'Mashhad'},
        {value:'Shiraz' , label:'Shiraz'},
         ]

return (
    <Container className="search-sec">
        
        <Form>
            <Row>
                <Col lg={7} md={5} sm={12} xs={12}>
                 <div className="job-field"> 
                    <input type="text" className="form-control" 
                  placeholder="job title, keywords or company name"/>
                </div>
                </Col>
                
                <Col lg={4} md={5} sm={12} xs={12}>
                   
                 <select onClick={() => setOpen(true)} className='city-field'>
                        { 
                            cities?.map((c) =>
                        <option key={c.value} value={c.value}>{c.label} 
                         </option>
                            )}
                </select>
                
                </Col>
            </Row>
        </Form>
       
    </Container>
)

}

Answer 1

As of now when you click on dropdown then open is true then you are able to see dropdown list.

You given condition {open && so when this open flag is true then only your options will displayed. you can remove that to see the dropdown.

<select onClick={() => setOpen(true)}>
  { 
    cities.map((c) =>
  <option value={c.value}>{c.label}</option>
      )}
</select>

Answer 2

why your select is dependent on the open state? I think you better do it as simple as:

<select>
    {
     cities?.map((c) =>
          <option value={c.value}>{c.label}</option>
    )}
</select>