I want to get a drop down but i am not getting it. The api is being called but its not being diaplayed on dropdown. I an new to react can any one rewrite the code for me.
import React,{useState} from 'react';
import axios from 'axios';
function App() {
const handleSelect=()=> {
axios
.get("https://cdndemo-api.co-vin.in/api/v2/admin/location/states")
.then((response) => {
console.log(response.data);
setState(response.data);
});
}
const [state, setState] = useState([]);
return <div>
<select onChange={handleSelect}
>
click
<option value="">Choose a user</option>
{state?.states?.map((value) => {
return (
<div>
<option value={value.state_name} key={value.state_id}>{value.state_name}</option>
</div>
);
})}
</select>
</div>;
}
export default App
It's better to keep your state's data type equal to the data type of the API response.
If the data you get from the API is an array then you can do something like this:
import React,{useState, useEffect} from 'react';
import axios from 'axios';
function App() {
//set initial state as []
const [state, setState] = useState([]);
useEffect(() => {
axios
.get("https://cdndemo-api.co-vin.in/api/v2/admin/location/states")
.then((response) => {
console.log(response.data);
// if response.data is an type of an array use this
setState(response.data);
});
}, []);
return <div>
<select
>
click
<option value="">Choose a user</option>
{/* Your mapping */}
{state.length > 0 && state.map((value) => {
return (
<option value={value.state_name} key={value.state_id}>{value.state_name}</option>
);
})}
</select>
</div>;
}
export default App
If your data type is an Object then you can do something like the
import React,{useState, useEffect} from 'react';
import axios from 'axios';
function App() {
//set initial state as null
const [state, setState] = useState(null);
useEffect(() => {
axios
.get("https://cdndemo-api.co-vin.in/api/v2/admin/location/states")
.then((response) => {
console.log(response.data);
// if response.data is an type of an object use this
setState(response.data);
});
}, []);
return <div>
<select
>
click
<option value="">Choose a user</option>
{/* Your mapping */}
{state && state.states.map((value) => {
return (
<option value={value.state_name} key={value.state_id}>{value.state_name}</option>
);
})}
</select>
</div>;
}
export default App
Try this code
import "./styles.css";
import axios from "axios";
import { useEffect, useState } from "react";
export default function App() {
const [state, setState] = useState([]);
useEffect(() => {
axios.get("https://jsonplaceholder.typicode.com/todos").then((res) => {
setState(res.data);
});
}, []);
return (
<div className="App">
<select>
{state.map((item) => (
<option value={item.name} key={item.id}>
{item.title}
</option>
))}
</select>
</div>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>