0
225
ViewsNot able to display drop down list in reactjs
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.
·
Juan Pablo Isaza
2 answers
Answer question0
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>
)
})
·
Juan Pablo Isaza
Report
0
I don't believe you await
httpClient.get. The.thenwill 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_statuskey:sts.request_statusset the
keyattribute for elements you create usingmap{ active && result.map((sts:any)=>{ {sts.request_status} }) }
·
Juan Pablo Isaza
Report
Answer question