Reputation: 211
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.
Upvotes: 0
Views: 107
Reputation: 7717
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} }) }
Upvotes: 1
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