Search code examples
htmlcssreactjsfluxroman-numerals

ReactJS how to create list "ol" or "ul" with roman number format

I'm creating JSX element which contains list, and I need to use the roman format, but nothing work

  1. type='i' not defined
  2. data-type='i' not working

  3. list-style-type="upper-roman" not working

    const howToTest: JSX.Element = (    
  <div>
    <ol list-style-type="upper-roman">
      <li>1</li>
    </ol>
  </div>
);
Solution

  • You should not pass list-style-type as a prop but as a style property.

    Example

    class App extends React.Component {
  render() {
    return (
      <div>
        <ol style={{ listStyleType: "upper-roman" }}>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ol>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>