Reactjs - convert string to HTML

Question

I have one problem with my code. I get string like "1234", and it wont render proper. I will post code and picture, so you can see whats happening.

    var valuteArray = ["USD", "AUD", "BGN", "BRL", "CAD", "CHF", "CNY", "CZK", "DKK", "GBP", "HKD", "HRK", "HUF", "IDR", "ILS", "INR", "JPY", "KRW", "MXN", "MYR", "NOK", "NZD", "PHP", "PLN", "RON", "RUB", "SEK", "SGD", "THB", "TRY", "ZAR", "EUR"];

     class Valute extends Component {
      render(){
      var currencyOptions = "";
      valuteArray.forEach((valuta) => currencyOptions += '<option>' + valuta + '</option>')
          return(
            <select className="btn btn-primary dropdown-toggle col-md-3">
              <option hidden> Choose your currency </option>
              {currencyOptions}
            </select>
          );
         }
        }

and here is a picture from Chrome - Elements

Mayank Shukla · Accepted Answer · 2017-12-14 11:39:16Z

3

Because you are treating them as a string, don't forgot we write JSX.

JSX:

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.

Write it like this:

var currencyOptions = [];
valuteArray.forEach(valuta => currencyOptions.push(<option key={valuta} value={valuta}>{valuta}</option>)

Or you can use #array.map directly:

<select className="btn btn-primary dropdown-toggle col-md-3">
  <option hidden> Choose your currency </option>
  {
    valuteArray.map(valuta => <option key={valuta} value={valuta}>{valuta}</option>)
  }
</select>

Also assign key to each dynamically created elements.

edited Dec 14, 2017 at 11:39

answered Dec 14, 2017 at 11:32

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Collectives™ on Stack Overflow

Reactjs - convert string to HTML

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related