How do I convert string to pure html?

Question

Not sure the proper vocabulary so I had trouble googling this. Basically I send a get request

it will return me option tags for my scroll down. Using axios so basically,

  componentDidMount() {

    axios.get("http://localhost:/8080/api/v1/getstuff"
    )
      .then((response) => {
        this.setState({ stuff: response.data })

      })
      .catch(function (error) {
        console.log(error);

      });

  }

stuff is now set to this:

and I placed it inside a select tag but it comes out as

"<option value='hello'>hello</option>
<option value='hello2'>hello2</option>
<option value='sss'>sss</option>"

rather than

<option value='hello'>hello</option>
<option value='hello2'>hello2</option>
<option value='sss'>sss</option>

Which makes it so the option tags don't show up. How to fix?

Possible duplicate of [Reactjs convert to html](https://stackoverflow.com/questions/19266197/reactjs-convert-to-html) — Madison Courto, Oct 28 '19 at 21:14

Jon Warren · Accepted Answer · 2019-10-28T21:22:55.667

There's 2 approaches you could take:

The first would be to set the inner html of the parent select tag. Something like this:

<select dangerouslySetInnerHTML={this.state.stuff}></select>

This definitely is not what I would recommend though. Since your api is on localhost, I'm assuming that you're able to manipulate the response? If so, are you able to get your api to return an array of objects? Something like this:

[{
    "value": "hello",
    "text": "hello"
},
{
    "value": "hello2",
    "text": "hello2"
},
{
    "value": "sss",
    "text": "sss"
}]

Then, you could so something like this:

<select>
    {this.state.stuff.map((o,i) => <option key={i} value={o.value}>{o.text}</option>)}
</select>

How do I convert string to pure html?

1 Answers1