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.state = {...question[0], i:0, v:""}
  }
  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() {
    return (
      <div>
        <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>
    )
  }
}

export default Quiz;