Not able to display drop down list in reactjs

Question

My API is returning below result.

I have below code to display in list.

const [result,setResult] = useState([]);
const fetchStatus = async ()=>{
       await httpClient.get( config.resourceServerUrl+"/certificates/status").then(res=>{
       setResult(res.data);
        setActive(true);
        alert(result);
       })

and I am displaying list like below.

<div className="col-md-4">
                                <label htmlFor="status">Status</label>
                                <select
                                name="requestStatus"
                                style={{ display: 'block' }}>
                                <option value="" selected >
                                    Please Select the Status
                                </option>
                               {
                                  
                                 active &&  result.map((sts:any)=>{
                                       <option key="" value="">
                                           {sts}
                                       </option>
                                   })
                               }
                          </select>

though there is no error but it is not displaying anything.

Its not working. even I simply put {1} still its not working. there is no error but values are not getting populated — Shruti sharma, Mar 03 '22 at 13:30
Does this answer your question? [value is not getting displayed in drop down list in API call](https://stackoverflow.com/questions/71336643/value-is-not-getting-displayed-in-drop-down-list-in-api-call) — jsN00b, Mar 03 '22 at 19:03

score 2 · Answer 1 · answered Mar 03 '22 at 13:32

2

Its because you've got {} around your JSX, should be ()

active &&  result.map((sts:any) => ( 
  <option>{sts}</option> 
))

or you can do

active &&  result.map((sts:any) => {
   return (
     <option>{sts}</option> 
   )
})

answered Mar 03 '22 at 13:32

glengomerson

41
6

score 1 · Accepted Answer · answered Mar 03 '22 at 13:35

1

I don't believe you await httpClient.get. The .then will be called when the get completes.
you are setting the dropdown to each object in the returned array. You want to set it to the value of the request_status key: sts.request_status
set the key attribute for elements you create using map

{ active && result.map((sts:any)=>{ {sts.request_status} }) }

answered Mar 03 '22 at 13:35

Dave

7,552
4
22
26

thank you @Dave . your solution is working. tell me one thing, is my API calling not appropriate? I mean I want to improve if it is not proper. – Shruti sharma Mar 03 '22 at 13:37
1

I believe you want to remove the `await` keyword if you're using .then(). Otherwise, you can say `const res = await httpClient.get()` and on the next few lines the contents of your then() method. I haven't used that call in a long time, so not positive - but it's very unlikely you'd want to mix async/await and then() apis. – Dave Mar 03 '22 at 13:48

Not able to display drop down list in reactjs

2 Answers2