@instructure/quiz-interactions/src/components/matching/Take/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'

/**
---
category: Matching
---
  Matching Take component

   ```jsx_example
  <SettingsSwitcher locales={LOCALES}>
    <TakeStateProvider>
      <MatchingTake
        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']
        }}
        userResponse={{
          value: { quuid1: 'George Washington' }
        }}
      />
    </TakeStateProvider>
  </SettingsSwitcher>
  ```
**/

export default class MatchingTake extends Component {
  static propTypes = {
    handleResponseUpdate: PropTypes.func.isRequired,
    interactionData: Match.propTypes.interactionData,
    itemBody: PropTypes.string.isRequired,
    userResponse: Match.propTypes.selectedAnswers,
  }

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

  render() {
    return <Match {...this.props} selectedAnswers={this.props.userResponse} />
  }
}