Parsing JSON file from LocalStorage in to react-native

Question

I've been trying to extract data from my local JSON file, but with no success. I've tried almost everything, but it doesn't work. Am I missing something or just not doing it right? I will be very glad if someone can resolve my issue. Normally on the error manager, it is displayed an error : [ts] JSX Expressions must have one parent element [2657] , but it is not shown on which line is the problem.

HistoryScreen.js

const Page = ({
      fromLeft,
      type,
      parallaxOn,
      flipSide,
      nextType,
      openDrawer,
    }) => (

      <View style={styles.page}>
        <RectButton style={styles.rectButton} onPress={openDrawer}>
            <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
                <FlatList 
                  data={this.state.dataSource}
                  renderItem = { ( {item}) => {
                return( 
                  <View style={{width: 60}}>
                    <Avatar

                      style={{flex: 0}}
                      size='large'
                      rounded
                      activeOpacity={0.7}
                      source={require('../components/avatars/club1.png')} />
                </View>
                <View>
                  <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
                      <View style={styles.rectButtonText}><Text>{item.name}</Text></View>
                      <View style={styles.rechtButtonTextNoteNote}><Text note >{item.date}</Text></View>
                  </View>
                  <Text note style={styles.rechtButtonTextNote}>{item.info}</Text>
                </View>
                    )
        }}
        keyExtractor = {(item, index) => index.toString()}
        />
        </View>
        </RectButton>

HistoryScreen.js

  export default class History extends Component {
  constructor(props){
    super(props);

    this.state = {
      isLoading: true, // check if json data (online) is fetching
      dataSource: [], // store an object of json data
    };
  }

  componentDidMount(){
      // set state value
      this.setState({
        isLoading: false , // already loading
        dataSoure : data.info
      });
  }

and here is my JSON file info.json

{
"info-club" : [
    {"name" : "Club-Defense Veterans" , "info" : "Pistolet , Carabine..." , "date" : "Fri May 04 2012 14:42:07 GMT-0070 (PDT)"},
    {"name" : "Club-Reflex Shooting" , "info" :  "Pistolet , Carabine...", "date" : "Fri May 04 2012 14:42:07 GMT-0070 (PDT)"},
    {"name" : "Club-Super Shooting" , "info" : "Pistolet , Carabine...", "date" : "Fri May 04 2012 14:42:07 GMT-0070 (PDT)"}
  ]
}

Answer 1

Hi the data prop ofFlatListcomponent accepts only array of values. But you are generating an object in your info.json file. You could try somenthing like this. It should be enough if you know the property name of the json file that you are trying to render.

I have created a minimal Expo example where you could see that it works.

import * as React from 'react';
import { 
  View, 
  StyleSheet, 
  TextInput,
  Dimensions,
  FlatList
} from 'react-native';

export default class App extends React.Component {

  constructor(props){
    super(props);
    this.state={
      data: require('./info.json') // load the file
    }
  }

  render() {
      const { data } = this.state   // state in a local const
      return (
          <View style={styles.container}>   
          <FlatList 
             data={data['info-club']}    // info-club prop of the json object
             keyExtractor={(item, index) => index.toString()}
             renderItem={ ({item, index}) => {

               // you custom logic here

               return (
                  <View>   { /*   I think you are missing that View Tag */}
                     <View style={{width: 60}}>
                         <Avatar
                           style={{flex: 0}}
                           size='large'
                           rounded
                           activeOpacity={0.7}
                           source={require('../components/avatars/club1.png')}
                         />
                     </View>
                     <View>
                        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
                            <View style={styles.rectButtonText}><Text>{item.name}</Text></View>
                            <View style={styles.rechtButtonTextNoteNote}><Text note >{item.date}</Text></View>
                         </View>
                         <Text note style={styles.rechtButtonTextNote}>{item.info}</Text>
                       </View>
                  </View>
                )
             }}
          >  
         </FlatList>         
          </View>
      );
    }
}

Answer 2

FlatList renderItem accepts React.Element and not multiple elements therefore you can wrap your elements in React.Fragment.

renderItem = { ( {item}) => {
  <React.Fragment> 
     {..// Rest of your Code}
  </React.Fragment>
}