index.js

import React from 'react';
import './index.scss'
import classnames from 'classnames'

const Navigation = ({questions, answer, handleClick, isAnalysis}) => {
  return (
    <div className="navigation">
      <ul>
        {
          !!questions.length && questions.map((item, index) => {
            const userSelectIndex = item.options.findIndex(item => item.user_select)
            const rightAnswerIndex = item.options.findIndex(item => item.is_ans)
            return <li key={index} onClick={handleClick.bind(this, index)}
                       className={classnames({
                         active: answer && answer[item.id],
                         correct: isAnalysis && userSelectIndex === rightAnswerIndex,
                         error: isAnalysis && userSelectIndex >= 0 && userSelectIndex !== rightAnswerIndex,
                         unselect: isAnalysis && userSelectIndex < 0,
                       })}>{index + 1}</li>
          })
        }
      </ul>
    </div>
  );
};

export default Navigation;