Can't render react-select, only basic HTML select

Question

I've got a <select> element where I'm pulling the options from a Rails data model. This is ok, but produces a bog-standard HTML select dropdown.

However, I'm wanting to use react-select component and this is where I'm struggling. I am able to render the react-select dropdown, but the options are blank. I don't have any errors in the console, and I can see the 51 items in my array in React-Dev-Tools.

This is the code that produces the basic HTML dropdown.

import React from 'react';
import axios from 'axios';
import Select from 'react-select';

class Country extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countries: []
        }
    }

    getCountries() {
        axios.get(`/countries.json`)
            .then(res => {
                const countries = res.data;
                this.setState({ countries });
            })
            .catch(error => console.log(error))
    }

    componentDidMount() {
        this.getCountries()
    }

    render() {
        return (
            <div className="container">
                <select className="taskList">
                    {this.state.countries.map((country) => {
                        return (
                            <option key={country.id} value={country.id}>{country.country_name}</option>
                        )
                    })}
                </select>
            </div>
        )
    }
}

export default Country

This is the code I'm trying for the react-select, and doesn't work

import React from 'react';
import axios from 'axios';
import Select from 'react-select';

class Country extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countries: []
        }
    }

    getCountries() {
        axios.get(`/countries.json`)
            .then(res => {
                const countries = res.data;
                this.setState({ countries });
            })
            .catch(error => console.log(error))
    }

    componentDidMount() {
        this.getCountries()
    }

    render() {
        return (
            let countryItems = this.state.countries.map((country) =>
                <option key={country.id} value={country.id}>{country.country_name}</option>
            );
        return (
            <div className="container">
                <label>Country</label>
                <Select id="country" name="coffee_beans[country_id]" options={countryItems} />
            </div>
        )
    }
}

export default Country

Sami Hult · Accepted Answer · 2019-01-07 21:39:04Z

1

Your options to react-select component should be an array of objects:

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

Now you are passing an array of components. So instead of

let countryItems = this.state.countries.map((country) =>
  <option key={country.id} value={country.id}>
    {country.country_name} . 
  </option>
);

try something along this:

let countryItems = this.state.countries.map(country => ({ 
  value: country.id,
  label: country.country_name
});

edited Jan 7, 2019 at 21:39

answered Jan 7, 2019 at 21:29

Sami Hult

3,0821 gold badge14 silver badges17 bronze badges

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

2 Comments

Simon Cooper Over a year ago

Sorry I left out all of the same code for brevity, I've now included it all. You'll see I'm still pulling the array.

Simon Cooper Over a year ago

Thanks @sami That appears to have worked. I've got issues submitting the value to my db, but that's probably a separate issue.

Collectives™ on Stack Overflow

Can't render react-select, only basic HTML select

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related