Working with nested array in react native - php

Question

I am making a quiz app in react native, I have written an API in PHP which fetches the question and the options from the database, with the response from API looking something like
[{"id":2109,
"title":"\u0915\u0930\u094d\u0923\u093e\u0932\u0940 \u0928\u0926\u0940\u0915\u094b \u0938\u0939\u093e\u092f\u0915 \u0928\u0926\u0940 \u0924\u0932\u0915\u093e \u092e\u0927\u094d\u092f\u0947 \u0915\u0941\u0928 \u0939\u094b\u0907\u0928 ?",
"option":[{
"option_id":191061,
"options":"\u0939\u0941\u092e\u094d\u0932\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
"correct":0
},
{
"option_id":191062,
"options":"\u0920\u0942\u0932\u094b \u092d\u0947\u0930\u0940",
"correct":0},
{
"option_id":191060,
"options":"\u092e\u0941\u0917\u0941 \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
"correct":0
},{
"option_id":191059,
"options":"\u0921\u094b\u0932\u094d\u092a\u093e \u0915\u0930\u094d\u0923\u093e\u0932\u0940",
"correct":1
}
]}]
................................
and so on,
Upto now I have successfully fetched the json in my react app as the way I like. But now I want to select only one option for each question, I want the option to be highlighted as per the user selection also I have to check if the user is correct or not by verifying with the json response.
How can I achieve this?
the full code is here:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Alert,
Navigator,
WebView,
ScrollView,
ListView
} from 'react-native';
export default class Api extends Component{
constructor(){
super()
this.state = {
id:'',
option_id:'',
option_option:[],
options_ans:[],
title:'',
data:[],
userSelectedIndex:-1,
}
}
componentWillMount(){
fetch('http://192.168.1.11/loksewaquiz/index.php? exam_of=kharidar', {method: 'GET'})
.then((response) => response.json())
.then((responseData) =>{
this.setState({
data:responseData,
})
})
.done();
}
onUserSelectedOption(index){
this.setState({
userSelectedIndex:index,
});
}
render(){
const result = this.state.data.map((data) =>{
const xx = data.ans_option.map((ans_option,index)=>{
return (
<TouchableHighlight onPress={()=> this.onUserSelectedOption(ans_option, index)}>
<Text key={ans_option.option_id} style={{backgroundColor: (index === this.state.userSelectedIndex) ? 'red' : 'transparent'}}> {ans_option.option_option}</Text>
</TouchableHighlight>
)
})
return(
<View>
<Text style={styles.titles}>{data.title}</Text>
{xx}
</View>
)
})
return(
<ScrollView>
{result}
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection:'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button:{
backgroundColor:'#EEE',
padding:10,
marginRight:5,
marginLeft:5,
},
options:{
padding:10,
marginRight:5,
marginLeft:5,
backgroundColor:'#EEE',
},
titles:{
backgroundColor:'#000',
color:'#FFF',
},
selectedoptions:{
backgroundColor:'#008000',
}
});
Here is the image when I select the first option
This is when I press the third option

Answer 1

Something like this , updated with one of the ways highlighting can be done
onUserSelectedOption = (option, index) => {
this.setState({
userSelectedIndex: index
});
if (option.correct === 1) {
//do something
}else {
//do something
}
}
render(){
const result = this.state.data.map((data) =>{
const xx = data.option.map((option, index)=>{
return (
<TouchableHighlight onPress={() => this.onUserSelectedOption(option, index)}>
<Text key={option.option_id} style={{backgroundColor: index === this.state.userSelectedIndex ? 'red' : 'transparent' }}>{option.options}</Text>
</TouchableHighlight>
)
})
return(
<View>
<Text style={styles.titles}>{data.title}</Text>
{xx}
</View>
)
})
return(
<ScrollView>
{result}
</ScrollView>
);
}

Answer 2

I would actually seperate the options in a new component, and pass relevant data via props. Not an expert on js, but sounds more solid then nested map functions.