How to avoid the default generated span tag

[powercoder23]

Hello,

First of all i would like to thank you for building this component, it is very much helpful!

I am facing an issue, basically i wanted to display a country drop-down in my application, below is the code what i am using

<select className="form-control" name="country" ref="country"  defaultValue={this.state.personData.countryCode} onChange={this.validateCountry} >
    <option value="empty-field">Country</option>
     {function () {
        var optionsTag = []
                for(var key in countryData){
                    var langKey = 'digest.people.form.countryDropdown.'+ key;
                     optionsTag.push(<option key={key} value={key}><Translate {...this.props} content={langKey} /></option>);
                 }
                 return optionsTag;
            }()}
          </select>`

The above code works but it creates an extra span tag inside every option.

Can you suggest any best way to do this?

Very much appreciated!

Thanks,
Dhiraj

[okbel]

Hi @powercoder23 !

The span issue with React was solve in this version facebook/react#5753
Please, check out your version.

I suggest another approach

const Content = ({ }) => {

  const options = countryData.map((option, i) => (
       <option key={i} value={option}><Translate {...this.props} content={langKey} /></option>
  ));

  return (
<select className="form-control" name="country" ref="country"  defaultValue={this.state.personData.countryCode} onChange={this.validateCountry} >
    <option value="empty-field">Country</option>
       {options}
   </select>
  );
};

Good luck!

[powercoder23]

Hi @okbel

I would like to Thank you for your answer, but seems the problem is not with the React, i am using react@15.1.0 which shows as latest.

when i am trying to use it with the Translate component, it adds the span tag

Thanks,
Dhiraj

[powercoder23]

Hi @martinandert,

It seems the Translate component is generating extra span tag, can you please help me removing this span tag

Thanks,
Dhiraj

[martinandert]

Hi @powercoder23, the demo app in the examples folder shows you how to handle translating option elements.

So instead of

<option key={key} value={key}>
  <Translate {...this.props} content={langKey} />
</option>

you should rather do

<Translate {...this.props} component="option" key={key} value={key} content="{langKey} />

If that doesn't help, please reopen.