Question 33899 in React native Question posted in
The official React Native documentation can be found here.

Accessing Objects within Objects from a FlatList In React Native

I am new to react and am trying to build a simple app however am having trouble accessing objects within objects.

I have tried to replace the FlatList with a VirtualizedList like the documentation suggests when the data is not a plain array, however this also did not work.
Is there a proper way of tackling this issue or do I just have to get creative with how I format my data?

Code:

const Owe = ({navigation, route}) => {
  return (
    <SafeAreaView>
      <FlatList
        data={information}
        renderItem={({item}) => 
        <View style={flatListStyle.container}>
          <Text style={titleBar.Text}>{route.data.message}</Text>
        </View>}

      />
    </SafeAreaView>
  );
}

var information = [
  {nme:"Joe", data: [
    {owed:true, amount: 10, message:"Beer Money"},
    {owed:false,amount: 5, message:"Lunch"}
  ]},
  {nme:"Ben", data:[
    {owed:true, amount: 50, message:"Broke bitch"},
    {owed:false, amount: 12.50, message:"Milk"}
  ]}
];

Error message:
"undefined is not an object (evaluating route.data.message)"

Tags:

2

Answers


  1. 0

    something is wrong with your code, didn’t get this code tbh route.data.message I guess it’s item.message and since it’s array maybe should looks like

      <View style={flatListStyle.container}>
          <Text>{item.nme}</Text>
{/* show all message */}
       {item.data.map((message, index) =>  <Text key={index} style={titleBar.Text}>{message}</Text>}
         
   </View>}
    Login or Signup to reply.
  2. 0

    route is not related to your information array, if you want to access item.data.message, then you have to iterate over item.data, because in information array, data is an array.
    Here is your working code

    import { SafeAreaView, FlatList, View, Text } from 'react-native';
const Owe = ({ navigation, route }) => {
  return (
    <SafeAreaView>
      <FlatList
        data={information}
        renderItem={({ item }) => (
          <View style={flatListStyle.container}>
            <Text style={[titleBar.Text,{fontWeight: 'bold' }]}>
              {item.nme}
            </Text>
            {item.data.map((dataItem) => (
              <Text style={{ color: 'black' }}>{dataItem.message}</Text>
            ))}
          </View>
        )}
      />
    </SafeAreaView>
  );
};

var information = [
  {
    nme: 'Joe',
    data: [
      { owed: true, amount: 10, message: 'Beer Money' },
      { owed: false, amount: 5, message: 'Lunch' },
    ],
  },
  {
    nme: 'Ben',
    data: [
      { owed: true, amount: 50, message: 'Broke bitch' },
      { owed: false, amount: 12.5, message: 'Milk' },
    ],
  },
];

export default Owe;

    and the output is like this
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search