Dropdown on react-select is still empty after load data from API

Question

I created an API on MVC.ASP.NET that returns data to a JSON format. I try to load a dropdown with data from this API but dropdown is still empty.

When I load a static data in dropdown, He work fine.

Im new in react, and may be the mistake is in my code.

I'm not sure I'm getting the API data right

I want to take only Station and StationName from this API.

My code:

import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

function parseStations(stations) {
  return stations.map((station) => {
    return { label: station.NameStation, value: station.Station };
  });
}

export default class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      options: [
        { value: true, label: 'Yes' },
        { value: false, label: 'No' },
      ], stations: [

      ],
      value: null
    }
    this.state = { stations: null}
    this.onChange = this.onChange.bind(this);
  }
  onChange(event) {
    this.setState({ value: event.value });
    console.log('Boolean Select value changed to', event.value);
  }

  componentDidMount() {
    const data =  this.getStations();
    console.log(data)
  }

  // async getStations() {
  //   fetch('http://localhost:56348/api/stations', {
  //     data: 'Station',
  //     data: 'NameStation',
  //     method: "GET"
  //   }).then(res =>
  //     console.log(res))
  //   // res.json())
  //   // .then(res => this.setState({ stations: parseStations(res.stations.Stations) }))
  //   //.then(res => this.setState({ stations: res.stations }))
  //   //.catch(e => )
  // }

  async getStations() {
    const res = await fetch('http://localhost:56348/api/stations', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        },
    });
    return await res.json();
}

  render() {
    if (!this.state.stations) return null;
    return (
      <div className="MasterSection">
        <div className="wrapper">
          <div className="section">Изберете № на станция</div>
          <Select
            onChange={this.onChange}
            //options={this.state.options}
            options={this.state.stations}
            value={this.state.value}
            clearable={false}
          />
        </div>
        <div class="section">
          <input type="text" class="form-control" placeholder="Дата (гггг-мм-дд)"
            aria-label="Username" aria-describedby="basic-addon1"></input>
        </div>
        <div class="section">
          <input type="text" class="form-control" placeholder="Брой дни назад"
            aria-label="Username" aria-describedby="basic-addon1"></input>
        </div>
        <div class="section">
          <button type="button" class="btn btn-outline-dark">Покажи</button>
        </div>
      </div>

      // <div className="MasterSection">
      //   <div className="wrapper">
      //     <div className="section">Изберете № на станция</div>
      //     <Select
      //       onChange={this.onChange}
      //       //options={this.state.options}
      //       options={this.state.stations}
      //       value={this.state.value}
      //       clearable={false}
      //     />
      //   </div>
      //   <div class="section">
      //     <input type="text" class="form-control" placeholder="Брой дни назад" aria-label="Username" aria-describedby="basic-addon1"></input>
      //   </div>
      //   <div class="section">
      //     <button type="button" class="btn btn-outline-dark">Покажи</button>
      //   </div>
      // </div>
    );
  }
}

Muneeb · Accepted Answer · 2018-02-23 13:07:42Z

2

Set your station's initial state to null Then, check the state in render if it's null your dropdown won't render

constructor() {
  super();
  this.state = {
  // This should be null on initial load
   stations: null,
   ...,
  }
}

render() {
/** If state is null return null */
if(!this.state.stations) return null;
return (
  <div className="MasterSection">
    <div className="wrapper">
      <div className="section">Изберете № на станция</div>
      <Select
        onChange={this.onChange}
        //options={this.state.options}
        options={this.state.stations}
        value={this.state.value}
        clearable={false}
      />
    </div>
    <div class="section">
      <input type="text" class="form-control" placeholder="Брой дни назад" 
      aria-label="Username" aria-describedby="basic-addon1"></input>
    </div>
    <div class="section">
      <button type="button" class="btn btn-outline-dark">Покажи</button>
    </div>
  </div>
 );
}

answered Feb 23, 2018 at 13:07

Muneeb

1,57916 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Zlatka Pijeva Over a year ago

How can initial state to null ? Stations[ { value: null } ] ?

Muneeb Over a year ago

this.state = { stations: null, }

Zlatka Pijeva Over a year ago

I update my code but dropdown is still empty :( maybe I do some wrong ?

Muneeb Over a year ago

log your state in render and check if it has some data? console.log(this.state.stations)

abdul Over a year ago

@ZlatkaPijeva this wouldn't make any difference. Don't accept as answer unless it solved your problem. what's the difference if the state is null or [] empty array.

|

Collectives™ on Stack Overflow

Dropdown on react-select is still empty after load data from API

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related