Хичээлээр сорилгын үр дүнгийн хэсгийн боловсруулалтыг хийцгээе. Одоогоор сорилгын асуултууд дуусахад бид консолд Finished текстийг үзүүлж байгааг өөрчлөхийн тулд Quiz компонентод false анхдагч утгатай isFinished төлвийг

const [isFinished, setIsFinished] = useState(false)

нэмэн өгөөд onAnswerClickHandler аргаас сорилго дуусанг шалгах isQuizFinished функцээс true утга буцаавал Finished текстийг үзүүлж байсныг

        if (isQuizFinished()) {
          setIsFinished(true)
        } else {
          ...
        }

гэж өөрчилье. Өөрөөр хэлбэл сорилго дуусан isQuizFinished функцээс true утга буцаавал setIsFinished функцээр isFinished төлвийг true утгатай болгоно.

Хичээлээр react компонентийн элементүүдийн хэвжүүлэлтэд хэрэг болох нэгэн аргачлалыг авч үзье. Тухайлбал элементийг inline -аар хэвжүүлэлтийн үед ашиглах техник юм. Иймээс Car компонентийн хэвжүүлэлтийн Car.css файлаас

.Car {
  margin-bottom: 10px;
  display: block;
  padding: 10px;
  border-radius: 5px;
}

border, box-shadow хэвүүдийг хасан тэдгээрийг Car компонентод inline -аар хэвжүүлэлтээр

  const style = {
    border: '1px solid #ccc',
    boxShadow: '0 4px 5px 0 rgba(0, 0, 0, .14)'
  }
  return (
    <div className="Car" style={style}>
      <h3>Машиний нэр: {props.name}</h3>
      <p>Он: <strong>{props.year}</strong></p>
      <input
        type="text"
        onChange={props.onChangeName}
        value={props.name}
        className={inputClasses.join(' ')}
      />
      <button onClick={props.onDelete}>Устгах</button>
    </div>
  )

style хувьсагчид тодорхойлоод Car компонентийг багцалж буй div -ийн style атрибутад дамжуулах болгон өөрчилье.

Хичээлээр өөрийн контролийг үүсгэн түүнийг v-model директивт хэрхэн тавин өгөхийг сурцгаая. Үүний тулд төслийн components хавтаст Onoff нэртэй

<template>  
  <div>
    <button class="on">On</button>
    <button class="off">Off</button>
  </div>    
</template>

<script>
  export default {
    data () {
      return {
        enabled: false
      }
    }
  }
</script>

<style scoped>
  button {
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    margin-right: 20px;
    outline: none;
  }

  button:active {
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .5);
  }

  .on.active {
    background: green;
    color: #fff;
  }

  .off.active {
    background: red;
    color: #fff;
  }
</style>

код бүхий компонентийг үүсгээд түүнийг app компонентод бүртгүүлээд шаблонд

<template>
  <div>
    <h2>Form inputs</h2> 

    <app-onoff></app-onoff>
  </div>
</template>

<script>
import Onoff from '@/components/Onoff'
export default {
  data () {
    return {
    }
  },
  components: {
    appOnoff: Onoff
  }
}
</script>

үзүүлье.

React сан компонентод суурилан ажилладаг тул асуултын хариултын хувилбаруудыг ActiveQuiz компонентоос салган тусд нь компонент болгоё. Үүний тулд төслийн ActiveQuiz компонентийг хадгалж буй хавтаст AnswersList шинэ хавтсыг үүсгээд түүнд AnswersList.js, AnswersList.module.css файлуудыг үүсгэн өгье.