Quiero obtener un menú desplegable pero no lo obtengo. Se llama a la API pero no se muestra en el menú desplegable. Soy nuevo para reaccionar, ¿alguien puede reescribir el código por mí?
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 AppEs mejor mantener el tipo de datos de su estado igual al tipo de datos de la respuesta de la API.
Si los datos que obtiene de la API son una matriz, entonces puede hacer algo como esto:
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 AppSi su tipo de datos es un Objeto, entonces puede hacer algo como lo
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 AppPrueba este código
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>