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.

CodePudding user response：

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

CodePudding user response：

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