I'm trying to create a FAQ, I have the data coming from an API but I'm having problems on how to show it on screen, here is my data
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]]: Object
the React.js code I want to insert the data is:
<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>
I want to substitute the "Question" and "Answer"
how do I do that? I'm totally lost.
You need to run over every item and return the JSX code that you need. This can be done with the .map function like this:
<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>
To avoid getting messy code I do recommend moving it into a function instead.
<AccordionDetails>
{this.renderQuestions()}
<AccordionDetails>