How can I style the ul li components in my React Native app? I am working on a learning management system app, specifically for the question and answer section. I need to display multiple options for each question with corresponding checkboxes, and also save the selected item value. The data fetched from the server is structured as follows:
JSON
{
"content": "<p><strong>Preliminary Exam</strong></p>\n",
"meta": {
"access": 1,
"status": 0,
"progress": 0,
"marks": 0,
"max": 60,
"questions": [{
"type": "single",
"hint": "",
"explanation": "",
"content": "<p>2.Question 2</p>\n",
"options": [
"(a) one ",
"(b) two ",
"(c) three ",
"(d) four"
],
"correct": "2",
"marks": 4,
"user_marks": 0,
"status": 0,
"marked": null,
"auto": 1
}]
}
}
I am currently rendering the questions inside JSX as a list within a card component. I want the options for each question to be displayed with checkboxes. Can someone please guide me on how to achieve this?
Update:
I have attempted the following:
import Checkbox from 'react-native-checkbox';
const ListWithCheckbox = ({details, checked, onPress}) => (
<View style={{flexDirection: 'row'}}>
<Checkbox checked onPress={onPress}/>
<Text>{details}</Text>
</View>
)
render() {
console.log(this.state);
return(
<Swiper showsButtons={true} loop={true} dotColor="transparent"
activeDotColor="transparent">
{this.state.details.map(a =>
<Card>
<CardSection>
<Text>{a.content = a.content.replace(regex , '')}</Text>
</CardSection>
<CardSection>
<ListWithCheckbox data={a.option} checked={this.state.checked} />
</CardSection>
</Card>
)}
</Swiper>
);
}