Array iteration only showing first letter on react native

Question

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 ?

Jayffe · Accepted Answer · 2018-07-25 07:09:36Z

2

That's weird but this seems to work :

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

edited Jul 25, 2018 at 7:09

answered Jul 25, 2018 at 6:48

Jayffe

1,28910 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shibin Raju Mathew Over a year ago

Invariant Violation:Objects are not valid as a react child(found: object with keys{key,index})

Jayffe Over a year ago

that's weird if your optn is effectively an array od strings. what is the output with <Text>{example.toString()}</Text>

Shibin Raju Mathew Over a year ago

Yeah that's worked . update in your answer i will accept

dvvtms · Accepted Answer · 2018-07-25 06:47:37Z

0

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

answered Jul 25, 2018 at 6:47

dvvtms

6273 silver badges10 bronze badges

2 Comments

Shibin Raju Mathew Over a year ago

Invariant Violation:Objects are not valid as a react child(found: object with keys{key,index})

dvvtms Over a year ago

please show console.log(example) and console.log(this.state.optn)

Collectives™ on Stack Overflow

Array iteration only showing first letter on react native

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related