Why i am not getting dropdown in react js can any one solve me this-CodePudding

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

CodePudding user response：

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>

CodePudding user response：

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