CODEWITHSUNDEEP
javascriptreactjs
Hiago Bonamelli
Hiago Bonamelli

Reputation: 381

React - Show an array value at a time and change with the click

I have an array with 30 questions and I need to display one at a time for the student to select an answer.

I'm thinking of creating 'currentQuestion' with question 0 in componentDidMount and the moment the student clicks next I add 1 in the counter and change the state 'currentQuestion' to the next?

I wonder if there is a better solution or is this a good idea?

EDIT 1:

I have not started building yet because I do not know if my idea is good, but in this case I am displaying the 30 questions, I want to find a way to display one at a time and change when the user clicks a button.

    render () {
    return (
        <div>
            {this.state.questions.map(item => (
                <p key={item.id}>
                    {item.component[0].content}
                </p>
            ))}
        </div>

    )
}

Upvotes: 1

Views: 1027

Answers (2)

GG.
GG.

Reputation: 21854

I'm thinking of creating 'currentQuestion' with question 0 in componentDidMount

I guess you want to store currentQuestion in your component's state?

If so, you can initialize it in the constructor like this:

class Quizz extends Component {
  constructor() {
    super();

    this.state = {
      currentQuestion: 0
    }
  }
}

For the rest of the component, I think you got the right idea.

You will end up with a component looking like this:

class Quizz extends Component {
  constructor() {
    super();

    this.state = {
      questions: [],
      currentQuestion: 0
    }

    this.nextQuestion = this.nextQuestion.bind(this)
  }

  componentDidMount() {
    fetchQuestions().then(questions => this.setState({ questions }))
  }

  nextQuestion() {
    this.setState(prevState => ({
      currentQuestion: prevState.currentQuestion + 1
    }))
  }

  render() {
    if (!this.state.questions.length) return <div>Loading…</div>        

    return (
      <div>
        <p>{this.state.questions[this.state.currentQuestion].content}</p>
        <button onClick={this.nextQuestion}>Next</button>
      </div>
    )
  }
}

Upvotes: 1

PeeJee
PeeJee

Reputation: 696

There are many ways to achieve what you want. Since you have to wait for the student to answer your question, there is no need to loop over your questions array. You can do something like this.

class QuestionsComponent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            questions: [
                'question_1',
                'question_2',
                'question_3',
                'question_4',
                'question_5',
            ],
            numberOfAnswers: 0,
        };
    }

    onAnswer = () => {
        this.setState({ numberOfAnswers: this.state.numberOfAnswers + 1 });
    }

    render = () => {
        return (
            <div className='CarouselTimer'>
                { this.state.questions[this.state.numberOfAnswers] }

                <button onClick={ this.onAnswer }>ANSWER</button>
            </div>
        )
    }
}

Let me know if this is what you are looking for.

Upvotes: 1

Related Questions