@instructure/quiz-interactions/src/components/matching/Show/index.js

A React UI component Library for quiz interaction types.

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import Match from '../common/Match'

const noop = () => {}

/**
---
category: Matching
---
  Matching Show component

  ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <MatchingShow
      itemBody="Match the Presidential term with the corresponding President."
      interactionData={{
        questions: [
          { id: 'quuid1', itemBody: '1st President' },
          { id: 'quuid2', itemBody: '16th President' },
          { id: 'quuid3', itemBody: '44th President' }
        ],
        answers: [
          'George Washington',
          'Thomas Jefferson',
          'Abraham Lincoln',
          'Barack Obama'
        ]
      }}
      scoringData={{
        value: {
          quuid1: 'George Washington',
          quuid2: 'Abraham Lincoln',
          quuid3: 'Barack Obama'
        }
      }}
    />
  </SettingsSwitcher>
  ```
**/

export default class MatchingShow extends Component {
  static propTypes = {
    itemBody: PropTypes.string.isRequired,
    interactionData: Match.propTypes.interactionData,
    scoringData: Match.propTypes.selectedAnswers,
  }

  static defaultProps = {
    interactionData: void 0,
    scoringData: void 0,
  }

  render() {
    return (
      <Match
        {...this.props}
        selectedAnswers={this.props.scoringData}
        handleResponseUpdate={noop}
        readOnly
      />
    )
  }
}