Shruti sharma
Shruti sharma

Reputation: 211

Not able to display drop down list in reactjs

My API is returning below result.

enter image description here

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.

enter image description here

Upvotes: 0

Views: 107

Answers (2)

Dave
Dave

Reputation: 7717

  1. I don't believe you await httpClient.get. The .then will be called when the get completes.

  2. 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

  3. set the key attribute for elements you create using map

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

Upvotes: 1

glengomerson
glengomerson

Reputation: 51

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> 
   )
})

Upvotes: 2

Related Questions