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)"}
  ]
}

i updatet it with your custom logic

Helmer Barcos
– Helmer Barcos

2018-12-12 18:10:36 +00:00
Commented Dec 12, 2018 at 18:10 — Helmer Barcos
– Helmer Barcos, Commented Dec 12, 2018 at 18:10

Helmer Barcos · Accepted Answer · 2018-12-12 18:10:18Z

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

Pritish Vaidya · Accepted Answer · 2018-12-12 16:15:53Z

1

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

answered Dec 12, 2018 at 16:15

Pritish Vaidya

22.3k4 gold badges62 silver badges78 bronze badges

1 Comment

Helmer Barcos Over a year ago

I think he want to know how to render the json file

Collectives™ on Stack Overflow

Parsing JSON file from LocalStorage in to react-native

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related