How can I set HTML code inside select <option> in React?

Question

I'm trying to output pretty fractions inside my options, ¼ ½ ¾ but it's displaying the "&frac 14;" as strings.

How can I get the JSX to interpret my optionContent and render the HTML, not as a string?

optionValue = "4.25" optionContent = "4 ¾" {optionContent}

can you show the code how you apply option in JSX ?

Anh Tuan
– Anh Tuan

2020-06-05 02:59:54 +00:00
Commented Jun 5, 2020 at 2:59 — Anh Tuan
– Anh Tuan, Commented Jun 5, 2020 at 2:59

Rodrigo Augusto Silva dos Sant · Accepted Answer · 2020-06-05 11:55:55Z

2

You can do it using the html-react-parser;

Example: https://codesandbox.io/s/parsing-html-react-zlmwj

import React, { useState } from "react";
import Parser from "html-react-parser";
import "./styles.css";

export default function App() {
  const [options, setOption] = useState(1);
  const [listOptions] = useState([
    { id: 1, desc: "4 &frac14;" },
    { id: 2, desc: "4 &frac12;" },
    { id: 3, desc: "4 &frac34;" }
  ]);

  function handleSelect(e) {
    const selected = e.target.value;
    setOption(selected);
  }

  return (
    <div className="App">
      <h1>Example parsing html in React</h1>

      <select value={options} onChange={e => handleSelect(e)}>
        {listOptions.map(option => (
          <option key={option.id} value={option.id}>
            {Parser(option.desc)}
          </option>
        ))}
      </select>
    </div>
  );
}

edited Jun 5, 2020 at 11:55

answered Jun 5, 2020 at 3:20

Rodrigo Augusto Silva dos Sant

1523 bronze badges

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

Collectives™ on Stack Overflow

How can I set HTML code inside select <option> in React?

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