Estoy tratando de crear una pregunta frecuente, tengo los datos provenientes de una API pero tengo problemas para mostrarlos en la pantalla, aquí están mis datos
0: answer: "The wellbeing score is Empatho's way of showing an end-user what their current state of wellbeing is. " application: "Admin Portal" question: "What is the wellbeing score?" section: "Wellbeing Dashboard" [[Prototype]]: Object 1: answer: "The wellbeing score is calculated using an individuals Heart Rate Variability (HRV), their passive data, as well as some survey questions that help Empatho get to know a person better. " application: "Admin Portal" question: "How is the wellbeing score calculated?" section: "Wellbeing Dashboard" [[Prototype]]: Objectel código React.js que quiero insertar los datos es:
<Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')} sx={{ width: '100%', padding: '30px' }} style={{ borderRadius: 20, margin:'10px 0px' }} > <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1bh-content" id="panel1bh-header" sx={{ borderRadius:10 }} > <div style={{ display:'flex', flexDirection:'row', alignItems:'center' }}> <div> <img src={wellbeingfaq} style={{ width:'auto', height:20, marginRight:25 }}/> </div> <div style={{ fontSize:'1.5em', fontWeight:'bold' }}>Wellbeing Dashboard</div> </div> </AccordionSummary> <AccordionDetails sx={{ padding: '20px' }}> <div style={{ fontSize:'1.3em', fontWeight:'bold' }}> <div>Question</div> </div> <div style={{ fontSize:'1.0em'}}> <div>Answer</div> </div> </AccordionDetails> </Accordion>Quiero sustituir la "Pregunta" y la "Respuesta"
¿Cómo puedo hacer eso? Estoy totalmente perdido.
Debe ejecutar cada elemento y devolver el código JSX que necesita. Esto se puede hacer con la función .map así:
<AccordionDetails> { this.state.listFromApi.map((item,index) => ( <div key={index}> <div> <div>Question</div> <div>{item.question}</div> </div <div style={{ fontSize:'1.0em'}}> <div>Answer</div> <div>{item.answer}</div> </div> </div> ))} </AccordionDetails>Para evitar obtener un código desordenado, recomiendo moverlo a una función.
<AccordionDetails> {this.renderQuestions()} <AccordionDetails>