disappearance of the container questions once the user answers

12 views Asked by At

En este codigo, estoy mostradno una pregunta y de acuerdo a las respuestas del usuario sigue una pregunta determinada en base al ID, necesito que una vez el usuario responda la pregunta, siga siendo visible, porque cuando el usuario responde pasa a la siguiente pregunta y deja de ser visible la que acabo de responder

import React, { Component } from 'react'
import * as SDK from "azure-devops-extension-sdk"
import "@/components/MainFrame/MainFrame.scss"

import { showRootComponent } from "@/Common"
import { getQuestions } from '@/domain/usecase/SecuenciaUsecase';
import { Answer } from '@/domain/model/Answer';

class MainFrame extends Component<{}, { questions: any[], selectedAnswers: { [questionId: number]: number }, currentQuestionIndex: number }> {

    constructor(props: {}) {
        super(props)
        this.state = {
            questions: [],
            selectedAnswers: {},
            currentQuestionIndex: 0
        }
    }

    public componentDidMount() {
        SDK.init()
            .then(() => {
                SDK.register(SDK.getContributionId(), () => {
                    return {

                    }
                })
            })

        SDK.ready().then(
            () => {
                SDK.notifyLoadSucceeded()
                SDK.resize()
            })

        try {
            const questions = getQuestions();
            this.setState({ questions });
            console.log('questions', questions);
        } catch (error) {
            console.error('Error al leer el archivo JSON:', error);
        }
    }

    handleAnswerChange = (questionId: number, selectedAnswerId: number) => {
        const nextQuestionIndex = this.getAnswerNext(selectedAnswerId);
        console.log("Pregunta actual: ", this.state.questions[questionId - 1]);
        console.log("Respuesta seleccionada: ", this.state.questions[questionId - 1].answers.find((answer: Answer) => answer.id === selectedAnswerId));
        console.log("Siguiente pregunta: ", this.state.questions[nextQuestionIndex - 1]);

        this.setState(({ selectedAnswers }) => ({
            selectedAnswers: {
                ...selectedAnswers,
                [questionId]: selectedAnswerId
            },
            currentQuestionIndex: nextQuestionIndex !== null ? nextQuestionIndex - 1 : 0
        }));
    }

    getAnswerNext = (selectedAnswerId: number) => {
        const currentQuestion = this.state.questions[this.state.currentQuestionIndex];
        const answer = currentQuestion.answers.find((answer: Answer) => answer.id === selectedAnswerId);
        return answer ? answer.next : null;
    }

    public render(): JSX.Element {
        const { questions, selectedAnswers } = this.state;
    
        return (
            <div className='container'>
                {questions.map((question) => (
                    <div key={question.id} style={{ display: selectedAnswers[question.id] !== undefined ? 'block' : 'none' }}>
                        <h3>{question.statement}</h3>
                        <select
                            value={selectedAnswers[question.id] || ''}
                            onChange={(e) => {
                                const selectedAnswerId = parseInt(e.target.value, 10);
                                this.handleAnswerChange(question.id, selectedAnswerId);
                            }}
                        >
                            <option value="">Selecciona una opción</option>
                            {question.answers.map((answer: Answer) => (
                                <option key={answer.id} value={answer.id}>{answer.text}</option>
                            ))}
                        </select>
                    </div>
                ))}
            </div>
        )
    }
    
}

export default MainFrame
showRootComponent(<MainFrame />)

I need that once the user answers a question, the answer option is blocked and the next question is displayed, without the one that the user has just answered disappearing from the visibility of the page.

0

There are 0 answers