how to use For Loops in react-native Render()?

Question

I try print this json in react-native json:

    {

        "1": {
            "text1-1": "text1-1-1",
            "text1-2": "text1-1-2",
            "data2": 
            [
              {
                "text2-1": "text1-2-1",
                "text2-2": "text1-2-2",
                "data3":
                [
                           {"text3-1": "text1-3-1","text3-2": "text1-3-2",}
                ]//data1-3
              }
            ]//data1-2
        }
        "2": {
            "text1-1": "text2-1-1",
            "text1-2": "text2-1-2",
            "data2": 
            [
              {
                "text2-1": "text2-2-1",
                "text2-2": "text2-2-2",
                "data3":
                [
                           {"text3-1": "text2-3-1","text3-2": "text2-3-2"}
                ]//data2-3
              }
            ]//data2
        },
        .
        .
        .
    }

I try print them in react-native like this:

1. • = text1-1-1
   • = text1-1-2
   • = = text1-2-1
   • = = text1-2-1
   • = = = text1-3-1
   • = = = text1-3-2
2. • = text2-1-1
   • = text2-1-2
   • = = text2-2-1
   • = = text2-2-1
   • = = = text2-3-1
   • = = = text2-3-2

I insert the json code to this.state.data

export default class item extends React.PureComponent  {
    render() {

          return ();
}

First step:

render() {

     return (
       <View>
          {this.getList()}
       <View>
     );
}

and function:

getList(){
  let list = this.state.data;
  for(var key in list ){
    return (<View><Text>{list[key].text1-1}</Text></View>);
  }
}

It print first text1-1 (text1-1-1)

How can print all text and nested text?

Answer 1

The problem lies inside your getList() method, which only returns one item since you use return (<View><Text>{list[key].text1-1}</Text></View>); . So no matter how big your list is, this code is only executed once and you directly return from the method.

You want to use the .map function instead like this:

return (
  <View>
    {this.state.data.map((item) => {
      return (<View><Text>{item.text1-1}</Text></View>);
    }}
  <View>
);

But another problem here it that item.text1-1 is not a access to an object. -1 is understood as operation like you want to subtrackt 1 from item.text1 . You should consider renaming those to something like text1_1 .