How to fill dropdown with JSON data in React?

Question

I try to fill in a dropdown with data from the JSON format but for now the dropdown is empty (no results found...)

I certainly have a mistake and I can not understand where I'm confusing.

I will attach a screen of my API.

I want to get Station and NameStation..

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.onChange = this.onChange.bind(this);
  }
  onChange(event) {
    this.setState({ value: event.value });
    console.log('Boolean Select value changed to', event.value);
  }

  componentDidMount() {
    this.getStations();
  }

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

  render() {
    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>
    );
  }
}

Dyo · Accepted Answer · 2018-02-22 11:46:21Z

3

Seems you made a typo naming the prop stations instead of options :

<Select
    onChange={this.onChange}
    options={this.state.stations} // here
    value={this.state.value}
    clearable={false}
/>

Edit : you'll need to parse your json first to pass a proper array of objects like this : [{ label: nameStation, value: Station }]

Edit 2 : Here's a parser for your data :

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

You can call this in your async request before setting the state :

.then(res => this.setState({ stations: parseStations(res.stations) }))

edited Feb 22, 2018 at 11:46

answered Feb 22, 2018 at 11:29

Dyo

4,4641 gold badge18 silver badges30 bronze badges

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

6 Comments

Dyo Over a year ago

@ZlatkaPijeva place the parseStations function outside of your component class or declare it as a method (remove "function" if you declare as a method)

Zlatka Pijeva Over a year ago

Now I have only two errors: Line 19: 'Station' is not defined no-undef Line 19: 'NameStation' is not defined no-undef

Dyo Over a year ago

@ZlatkaPijeva you added [{ label: nameStation, value: Station }] in your initial state, i wrote this just to illustrate the object format you need to pass to the Select options, just remove this and set the initial state to an empty array like you did before : stations: [ ]

Zlatka Pijeva Over a year ago

I remove [{ label: nameStation, value: Station }] and leave empty array, but dropdown is still empty (no results found) :(

Dyo Over a year ago

@ZlatkaPijeva maybe change res.stations to res.stations.Stations

|

izengod · Accepted Answer · 2018-02-22 11:40:47Z

1

componentDidMount() is executed only after render() is completed. so there's no way getStations() gets executed at the time your UI gets rendered. it is not a good idea to setState inside componentDidMount() as it triggers re rendering. use componentWillMount() instead.
correct the typo that Dyo mentioned and use options={this.state.stations}

answered Feb 22, 2018 at 11:40

izengod

1,1565 gold badges17 silver badges44 bronze badges

3 Comments

Dyo Over a year ago

Fetching data in componentDidMount() is a good practice, you can't expect to have the data before the first render using componentWillMount() so you'll also need to set an initial state and the rerendering will occur too. (also componentWillMount will be deprecated in the future)

izengod Over a year ago

@Dyo I got your point, my concern was only with the setState. since fetch() is async in nature there's no way to separate them in two different functionality as well. do you think setState() inside componentDidMount() is OK to go with?

Dyo Over a year ago

Yes it is when you setState in async functions, for sync operations constructor is a better option.

Collectives™ on Stack Overflow

How to fill dropdown with JSON data in React?

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related