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.