Rails Country_在ReactJs中选择宝石

Question

I'm trying not to do something stupid this morning but I'm finding myself love to use the HTML5 data-* attribute. I have installed country_select rails gem and it works great in html.erb , within a form:

<%= f.country_select :location, { priority_countries: ["GB", "US"], selected: "GB" } %>

My stupid way of pulling this into Reactjs would be:

html.erb:

<div id="foo" data-countries="<%= f.country_select :location, { priority_countries: ["GB", "US"], selected: "GB" } %>"></div>

For the above, I normally do this for methods.

js.jsx:

getInitialState: function() {
  return {
    location: this.props.data.location
  }
},

geo: function(event) {
  this.setState({location: event.target.value});
},

render: function(){
  var bar = document.getElementById('foo');  

  return (
      <div>
        <select
           value={this.state.location}
           onChange={this.geo}
         >
           <option value="" selected disabled>Please select</option>
           <option value="{bar.dataset.countries}">{bar.dataset.countries}</option>
         </select>
      </div>
    )
 }

In my views, all the countries are spitted out caused by the data-countries in the html.erb . Also in the rendered dropdown menu, I see the "Please Select" and <select name=

I know what I'm doing is 100% incorrect. Is there a correct way on doing this, if possible with this gem?

Answer 1

I have found it! Basically you'll need to get the name from the country gem :

In your User Model:

def country
  country = ISO3166::Country
  c = country.all
  c.map do |a| a.name end
end

Now somewhere in the appropriate controller:

def method_name
 c = User.new
 # Calling the method from user.rb
 @country = c.country
end

Since I'm using react-rails , in my views:

<%= react_component('NewProject', { country: @country }) %>

js.jsx:

render: function(){
  var country = (c) => (<option key={c} value={c}>{c}</option>) 

  return (
      <div>
        <select
           value={this.state.location}
           onChange={this.geo}
         >
           <option value="" selected disabled>Please select</option>
           {this.props.country.map(country)}
         </select>
      </div>
    )

Now I got my drop down. Hope this is useful to others!