How to create an ordered numbered list in React

Question

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>
}

Answer 1

Use an ordered list to get the numbering

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

Answer 2

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')
);