Repository: freeCodeCamp/freeCodeCamp
File: client/src/templates/Challenges/exam/show.tsx (TypeScript)

Code before:
          <Helmet title={windowTitle} />
          <Grid>
            <Row>
              <Col md={8} mdOffset={2} sm={10} smOffset={1} xs={12}>
                <ChallengeTitle
                  isCompleted={isChallengeCompleted}
                  translationPending={translationPending}
                >
                  {title}
                </ChallengeTitle>
                <Spacer size='medium' />

                {qualifiedForExam ? (
                  <Alert id='qualified-for-exam' bsStyle='info'>
                    <p>{t('learn.qualified-for-exam')}</p>
                  </Alert>
                ) : (
                  <Alert id='not-qualified-for-exam' bsStyle='danger'>
                    <p>
                      {t('learn.not-qualified-for-exam')}{' '}
                      {t('learn.incomplete-challenges')}
                    </p>
                    <Spacer size='small' />
                    <ul>
                      {incompletePrequisites.map((challengeTitle, i) => (
                        <li key={i}>{challengeTitle}</li>
                      ))}
                    </ul>
                  </Alert>
                )}

                <PrismFormatted text={description} />
                <Spacer size='medium' />
                <PrismFormatted text={instructions} />

                <Button
                  block={true}
                  bsStyle='primary'
                  data-cy='start-exam'
                  disabled={!qualifiedForExam}
                  onClick={this.runExam}
                >
                  {t('buttons.click-start-exam')}
                </Button>
              </Col>
              <CompletionModal />
              <HelpModal challengeTitle={title} challengeBlock={blockName} />
            </Row>
          </Grid>
        </LearnLayout>
      </Hotkeys>

Review comment (suggestion):
```suggestion
                      {missingPrequisites.map(({ title, id }) => (
                        <li key={id}>{title}</li>
```
Let's not use the array index - it's a "pitfall" according to [their docs](https://react.dev/learn/rendering-lists#why-does-react-need-keys). It's fine as long as the prerequisite array doesn't change over time, but slightly questionable patterns have a way of spreading.

Also, it's trivial to use the ids here

Code after:
                </ChallengeTitle>
                <Spacer size='medium' />

                {qualifiedForExam ? (
                  <Alert id='qualified-for-exam' bsStyle='info'>
                    <p>{t('learn.qualified-for-exam')}</p>
                  </Alert>
                ) : (
                  <Alert id='not-qualified-for-exam' bsStyle='danger'>
                    <p>{t('learn.not-qualified-for-exam')}</p>
                    <Spacer size='small' />
                    <ul>
                      {missingPrequisites.map(({ title, id }) => (
                        <li key={id}>{title}</li>
                      ))}
                    </ul>
                  </Alert>
                )}

                <PrismFormatted text={description} />
                <Spacer size='medium' />
                <PrismFormatted text={instructions} />

                <Button
                  block={true}
                  bsStyle='primary'
                  data-cy='start-exam'
                  disabled={!qualifiedForExam}
                  onClick={this.runExam}
                >
                  {t('buttons.click-start-exam')}
                </Button>
              </Col>
              <CompletionModal />
              <HelpModal challengeTitle={title} challengeBlock={blockName} />
            </Row>
          </Grid>
        </LearnLayout>
      </Hotkeys>
    );
  }
}

ShowExam.displayName = 'ShowExam';

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withTranslation()(ShowExam));

// GraphQL