CODEWITHSUNDEEP
reactjs
Ajay Kumar
Ajay Kumar

Reputation: 3272

ReactJS - Data does not load in dropdown list from axios call

I have a React Component like below:

import axios from "axios";
import React from "react";

export default class PersonList extends React.Component {
  state = {
    users: [],
  };

  componentDidMount() {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        // handle success
        let thedata = response.data;
        this.setState({ thedata });
        console.log(thedata);
      })
      .catch((error) => {
        // handle error
        console.log(error);
      });
  }

  render() {
    return (
      <select>
        {this.state.users.map((user) => (
          <option value={user.id}>{user.name}</option>
        ))}
      </select>
    );
  }
}

The data shows up on console just fine. But my dropdown stills shows empty. No error whatsoever. What I am missing here?

Upvotes: 0

Views: 95

Answers (1)

Lakshya Thakur
Lakshya Thakur

Reputation: 8316

You are setting state as {thedata:thedata} instead of {users:thedata}. Change it like so :-

  componentDidMount() {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        // handle success
        let thedata = response.data;
        this.setState({users:thedata });
        console.log(thedata);
      })
      .catch((error) => {
        // handle error
        console.log(error);
      });
  }

Upvotes: 1

Related Questions