CODEWITHSUNDEEP
arraysreact-nativeiteration
Shibin Raju Mathew
Shibin Raju Mathew

Reputation: 930

Array iteration only showing first letter on react native

On optn we have following data

"optn": [
    "ഫത്തേപ്പൂര്  സിക്രി",
    "ഖജൂരാഹോ ക്ഷേത്രം",
    "ചാര്മിനാര്",
    "കുത്തബ്മീനാര്"
],

iteration done as below,but while calling example[0] getting only first letter like "ഫ", "ഖ", "ച", "ക" on 'example' only getting error

Invariant Violation:Objects are not valid as a react child(found: object with keys{key,index}) if you meant to render a collection of children use an array instead

objAns= this.state.optn.map((example,index) =>{
  return(
    <View  key={index.toString()} >
    <RadioButton currentValue={this.state.value} value={index+1} onPress={this.handleOnPress.bind(this)}>
    <Text>{example[0]}</Text>
    </RadioButton>
  </View>
  );
});

if we using {example[0]}{example[1]}{example[2]}then we get next letters and if optn contain English words then no problem it will work but i have to manage these type of data so how to solve such issue. is it possible to use 'for loop' inside ?

Upvotes: 0

Views: 349

Answers (2)

Jayffe
Jayffe

Reputation: 1279

That's weird but this seems to work :

<Text>{example.toString()}</Text>

Upvotes: 2

dvvtms
dvvtms

Reputation: 627

change example[0] to example, its not needed. when mapping, you get array values, what in your scenario is string, and with example[0] you select the first letter of string

objAns= this.state.optn.map((example,index) =>{
  return(
    <View  key={index.toString()} >
    <RadioButton currentValue={this.state.value} value={index+1} onPress={this.handleOnPress.bind(this)}>
    <Text>{example}</Text>
    </RadioButton>
  </View>
  );
});

Upvotes: 0

Related Questions