Quiz.js

import React from 'react';
// import logo from './logo.svg';
// import './App.css';


const question = [
  { Q: "당신의 성별은?", A: "" },
  { Q: "당신의 이름은?", A: "" },
  { Q: "당신의 점수는?", A: "" }
]

class Quiz extends React.Component {
  constructor(props) {
    super(props)
    this.setAnswer = this.setAnswer.bind(this)
    this.setQuestion = this.setQuestion.bind(this)
    this.ShowQuiz1 = this.ShowQuiz1.bind(this)
    this.state = { ...question[0], i: 0, v: "", r: 0 }
  }
  ShowQuiz1() {
    this.setState({ r: 1 })
  }
  setQuestion() {
    this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, v: "" })
  }
  setAnswer(e) {
    question[this.state.i]["A"] = e.target.value
    this.setState({ v: e.target.value })
    console.log(this.state)
    console.log(question)
  }
  render() {
    if (this.state.r === 1) {
      if (this.state.i === 3) {
        return (
          <div>
            <h2>수고하셨습니다!</h2>
          </div>
        )
      }
      else {
        return (
          <div className="quiz">
            <h2>Q:{this.state.Q}</h2>
            <div>
              <input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
            </div>
            <button type="button" onClick={this.setQuestion}>다음 문제로</button>
          </div>
        )
      }
    }
    else {
      return (
        <>
          <div className="App">
            <h1 style={{ background: "orange", display: "inline-block", border: "3px solid black", width: "200px" }}> Calculus</h1>
          </div>
          <div className="App">
            이름을 입력하세요
          <input onChange={(event) => { console.log(event.target.value) }} />
          </div>
          <button onClick={this.ShowQuiz1} style={{ margin: "30px", marginLeft: "690px", width: "150px", height: "30px", fontFamily: "impact" }}>Quiz Start !</button>
        </>

      )
    }
  }
}

export default Quiz;