Ujjwal Nepal Ujjwal Nepal - 10 days ago 5
PHP Question

Working with nested array in react native

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?

render function is shown below:

render(){
const result = this.state.data.map((data) =>{
const xx = data.option.map((option)=>{
return (
<TouchableHighlight>
<Text key={option.option_id}>{option.options}</Text>
</TouchableHighlight>
)
})
return(
<View>
<Text style={styles.titles}>{data.title}</Text>
{xx}
</View>
)
})
return(
<ScrollView>
{result}
</ScrollView>

);
}


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',
}
});

Answer

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>

);
}
Comments