Local data in JSON File is not displaying on screen (React Native)

Question

I am currently learning RN and I right now I am trying to display data dynamically from a JSON file I created locally. What I would like to do is display the list of characters and give the user the chance to press on a particular character's button to take them to their profile screen. However, I keep getting a message saying "Cannot convert undefined or null to object". Can someone explain to me why I am getting that? How can I fix that? Any help or leads are appreciated.

This is the JSON file I created:

//Characters.js
const characters = [
      { id: "1", name: "Homer Simpson", occupation: "Nuclear Safety Inspector" },
      { id: "2", name: "Marge Simpson", occupation: "Stay-at-home mom" },
      { id: "3", name: "Bart Simpson", occupation: "Student" },
      { id: "4", name: "Lisa Simpson", occupation: "Student" },
      { id: "5", name: "Maggie Simpson", occupation: "Baby" },
      { id: "6", name: "Barney Gumble", occupation: "Homer's BFF" },
      { id: "7", name: "Kent Brockman", occupation: "TV Anchor" },
      { id: "8", name: "Mr. Burns", occupation: "Nuclear Plant Owner" },
      { id: "9", name: "Ralph Wiggum", occupation: "Police Officer" },
      { id: "10", name: "Otto Mann", occupation: "School Bus Driver" },
      { id: "11", name: "Santa's Little Helper", occupation: "Family Pet" },
      { id: "12", name: "Scratchy", occupation: "Cat" }
    ];
    export default characters;

This is how I am trying to bring it in:

import React, { Component } from "react";
import { Text, View } from "react-native";
import { withNavigation } from "react-navigation";
import {
    createStackNavigator,
    createAppContainer,
    createBottomTabNavigator
  } from "react-navigation";

import characters from "../Data/Characters";

class CharacterDirectory extends React.Component {
    static navigationOptions = {
        title: "The Simpsons",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: {
          fontWeight: "bold"
        },
      };
  render() {
      const { navigation } = this.props;
      const type = navigation.getParam('type');
      const typeData = characters[type];
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            {Object.keys(typeData).map(id => (
                <Button
                    title={'Go to${typeData[id].name}'}
                    onPress={() => 
                        this.props.navigation.push('Details', {
                            type,
                            item: typeData[id],
                        })}
                        />
            ))}
        </View>
    )
  }
}
export default CharacterDirectory;

hong developer · Accepted Answer · 2019-08-20 15:14:30Z

1

Can be used as a direct.Try using this method.

            {characters.map( (data,index) => (
                <Button
                    title={`Go to${data.name}`}
                    onPress={() => 
                        this.props.navigation.push('Details', {
                            type : type,
                            item: data,
                        })}
                        />
            ))}

answered Aug 20, 2019 at 15:14

hong developer

13.9k4 gold badges46 silver badges73 bronze badges

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

Comments

Trần Công · Accepted Answer · 2019-08-20 15:22:07Z

0

May be some confused in here

{Object.keys(typeData).map(id => (
                <Button
                    title={'Go to${typeData[id].name}'}
                    onPress={() => 
                        this.props.navigation.push('Details', {
                            type,
                            item: typeData[id],
                        })}
                        />
            ))}

With this code const typeData = characters[type];. Typedata maybe equal to { id: "1", name: "Homer Simpson", occupation: "Nuclear Safety Inspector" }. If you loop throught keys of this object. the id equal one of theseid, name, occupation and it will not correct if you only want show 1 button for one Typedata.

answered Aug 20, 2019 at 15:22

Trần Công

2981 silver badge5 bronze badges

Collectives™ on Stack Overflow

Local data in JSON File is not displaying on screen (React Native)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related