Tengo un acordeón de reactJs en el que muestro preguntas y respuestas (faq), cada pregunta puede tener varias respuestas, los datos se obtienen de una API con axios, tengo dos formularios para publicar preguntas y respuestas, el formulario de preguntas funciona como quiero , pero el formulario de respuesta no, el problema es que necesito el ID de la pregunta seleccionada para poder pasarlo como parámetro a la url en axios ('https://api.com/answers?question_id='+param.question_id ) para que pueda publicar la respuesta en la pregunta correcta. En cada pregunta tengo un botón Responda esta pregunta, el clic debe obtener el ID de la pregunta para que pueda agregarlo al estado
Tengo este estado en App.js
class App extends Component { constructor(props) { super(props); this.conteneur = React.createRef(); this.state = { questions: [], question_id: null params: { client_id: null, question_id: null }, }; } handleSentData = (dataQ) => { this.sendData(dataQ); } sendData = (formData) => { let newData = { ...this.state }; newData.params = { client_id: this.props.client, question_id: this.state.theQuestion, name : formData.name, email : formData.email, subject : formData.answer }; Api.answerQ(newData.params) .then((response) => { if (response.data.status === "success") { return response.data.data; } this.setState({ questions: [...response.data.questions.items], question_id: response.data.questions.items.id }); }); }; } export default App;En App.js, paso el método handleSentData al componente secundario AccordionItem donde mapeo los elementos y data.id devuelve el Id.
this.state.questions.map((data, index) => ( <AccordionItem key={index} index={data.id} QST={this.handleQuestionId}/> ))Tengo este método en el componente AccordionItem, cada vez que hago clic en un elemento, obtengo la ID del elemento y paso props.QST (índice) a la aplicación principal.js
const eventHandler = (e, index) => { e.preventDefault(); setActive(index); props.QST(index) }Necesito agregar el estado de question_id a newData.params para poder pasarlo como parámetro a la url
Mirando su código, no veo por dónde pasa y representa la matriz de la pregunta. Pero el enfoque más práctico sería que cuando aplique el mapa en la matriz, obtenga la identificación de la pregunta y la pase al componente necesario, en este caso supongo que sería el botón de respuesta. Y agrega ese nuevo parámetro en la función handleSentData. No estoy seguro, porque estoy un poco confundido, no me queda claro si el código que tienes está funcionando o es un boceto de lo que quieres lograr.
Hice un pequeño ejemplo, tal vez te pueda servir de guía:
import React, { useState } from "react"; const questions = [ { id: 1, text: "What is 2 plus 2?" }, { id: 2, text: "What is 10 plus 10?" } ]; const answers = [ { id: 1, text: "It is 4" }, { id: 2, text: "It is 8" } ]; const fetchAnswer = (questionId) => { const answer = answers.find((answer) => answer.id === questionId); return answer ? answer.text : "I don't really know"; }; const Questions = (props) => { const { questions, handleSentData } = props; return ( <ul> {questions.map((question) => { return ( <li key={question.id}> <span>{question.text}</span> <button onClick={() => handleSentData(question.id)}> Answer this question </button> </li> ); })} </ul> ); }; export default function App() { const [answer, setAnswer] = useState(null); const handleSentData = (questionId) => { // Fetch answers from somewhere using the question id. const response = fetchAnswer(questionId); console.log(response); setAnswer(response); }; return ( <div className="App"> <h1>Questions</h1> <Questions questions={questions} handleSentData={handleSentData} /> <h1>Answer</h1> <div>{answer ? answer.text : "Your answer will appear here!"}</div> </div> ); }