CODEWITHSUNDEEP
reactjs
early_ninja
early_ninja

Reputation: 119

How to create an ordered numbered list in React

I need to create an ordered list in React and I am doing following in the render()

render() {
    <div key ={category.index}>
        question.map(questionlist =>
        <li key={questionlist.key}>{questionlist.description}</li>)}
    </div>
}

Upvotes: 4

Views: 31151

Answers (3)

Haejin Jo
Haejin Jo

Reputation: 101

If you are still unable to render an ordered list even after wrapping your JSX li elements in an ol, several people have run into lurking list-style CSS attributes (e.g. found in a reset stylesheet) that modify the expected behavior for cross-browser compatibility.

I would inspect the DOM in the browser to double check that that is not the case for you.

Upvotes: 2

Charlie Martin
Charlie Martin

Reputation: 8406

Use an ordered list to get the numbering

render() {
  <ol>
     {question.map(questionlist =>
       <li key={questionlist.key}>{questionlist.description}</li>
     )}
  </ol>
}

Upvotes: 12

Piotr Berebecki
Piotr Berebecki

Reputation: 7468

You need to use curly braces {} if you want to use JavaScript inside your JSX. Here is a demo: http://codepen.io/PiotrBerebecki/pen/RGjLyd

Based on your question, I've assumed that your array has the following format:

const questionList = [
  {description: 'How to render list in React?', key: 0},
  {description: 'Do you like JS?', key: 1},
  {description: 'Do you know CSS?', key: 2}
];

Full code here:

class App extends React.Component {

  render() {
    const questionList = [
      {description: 'How to render list in React?', key: 0},
      {description: 'Do you like JS?', key: 1},
      {description: 'Do you know CSS?', key: 2}
    ];

    return (
      <ol>
        {questionList.map(question => {
          return (
            <li key={question.key}>{question.description}</li>
          );
        })}
      </ol>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Upvotes: 2

Related Questions