understanding-graphs/src/js/components/partials/QuestionItem.jsx

import { h, render, Component } from 'preact'; // eslint-disable-line no-unused-vars

// module02: Question Item
// outputs the current question
export default class QuestionItem extends Component {

  render () {
    const keyPrefix = `${this.props.currentGroup}_${this.props.currentQuestion}`;
    const hasQuestion = this.props.currentGroup < 2;

    return (
      <div className="question  question__manipula">
        <div className="question__title">{this.props.question.text}</div>

        { hasQuestion
          ? <div className="question__options">
            {this.props.answers.map((antwort, index) => {
              const markerClass = index === this.props.currentAnswerIndex ? 'question__options__item--marked' : '';
              const correctClass = antwort.korrekt && this.props.currentAnswerIndex !== null ? 'question__options__item--correct' : '';

              return (
                <p className={`question__options__item ${markerClass} ${correctClass}`} key={`${keyPrefix}_${index}`}>
                  <input class="checkbox-input" name="option" id={`option-${index}`} value="1" type="radio" />
                  <label onClick={ () => this.props.setAnswer(antwort) } class="checkbox-label" for={`option-${index}`}>
                    {antwort.antwort}
                  </label>
                </p>
              );
            })}
          </div>
          : []}

      </div>
    );
  }
}