react native: display props information that coming from another page-CodePudding

I'm trying to print EquipmentID inside the flatlist And for some reason it does not show me its information. I would like to understand what is wrong with my code. The data (props) come from another screen . in my example i show the flatlist screen and the props as it print.

const EquipmentContentCardOptions = props => {

  const renderItem = ({ item }) => {

    return <Text>{props.EquipmentID}</Text>;
   
  };

  return (
    <FlatList
      data={props}
      renderItem={renderItem}
      keyExtractor={item => item.EquipmentID}
    />
  );
};

export default EquipmentContentCardOptions;

this is the props :

{
   "EquipSetData":[
      {
         "EquipmentID":"567",
         "EquipmentName":"aaa",
         
      },
      {
         "EquipmentID":"123",
         "EquipmentName":"rrr",
      }
        ]
}

CodePudding user response：

I would suggest you console.log(props) as well as console.log(item) to see if they aren't null.If renderItem is meant to be a component, then, you have defined it inside another component which is wrong. Plus the name must start with a capital letter (if it is meant to be a component). You probably need to include the FlatList component to see how the props is passed to it.

CodePudding user response：

you are passing props directly to the FlatList and then trying to access the EquipSetData's data so what you need to do is

 <FlatList
  data={props.EquipSetData}
  renderItem={renderItem}
  keyExtractor={item => item.EquipmentID}
/>

Hope this would resolve your issue