display image and text from array on react native

Question

I'm new on react native. I want to display images and text from array. When I'm trying to extract image from my app, It doesn't work, the images are not displayed.

const DATA = [
  {
    title: "Animaux",
    data: ["Poissons","Crevettes","Escargots"],
    image: [require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png'),require('../assets/icon_aquarium_style.png')]
  }
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const ImageType = ({ image }) => (
  <View style={styles.image}>
    <Image source={image}/>
  </View>
);

export default class InventaireScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          sections={DATA}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item, image }) => 
            <View >
              <ImageType source={image}/>
              <Item title={item} />
            </View>
            }
          renderSectionHeader={({ section: { title } }) => (
            <View>
              <Text>{title}</Text>
            </View>
          )}
        />
      </SafeAreaView>
    );
  }
}

the images are not displaying. Could you please tell me where I'm wrong? Thanks.

EDIT:

I modified my array like that:

const DATA = [
  {
    title: "Poissons",
    image: require('../assets/icon_aquarium_style.png')
  },
  {
    title: "Crevettes",
    image: require('../assets/icon_aquarium_style.png')
  },
  {
    title: "Escargots",
    image: require('../assets/icon_aquarium_style.png')
  },
];

I try to extract data using render:

export default class InventaireScreen extends React.Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <SectionList
          sections={DATA}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item }) => 
            <View style={{flexDirection: 'row', textAlign: 'left', fontSize: 15, backgroundColor:'white'}}>
              <ImageType image={item.image}/>
              <Item title={item.data} />
            </View>
            }
          renderSectionHeader={({ section: { title } }) => (
            <View>
              <Text style={styles.header}>{title}</Text>
            </View>
          )}
        />
      </SafeAreaView>
    );
  }
}

I want to display section title using title parameter, an image using image source, and a text using data parameter of my array.

I have this error

 ERROR    TypeError: undefined is not an object (evaluating 'items.length')
``

Answer 1

Try correcting renderItem.

renderItem={({ item }) => 
        <View >
          <ImageType image={item.image}/>
          <Item title={item.title} />
        </View>
        }

and keyExtractor.

keyExtractor={(item, index) => item.title + index}

this keyExtractor will only take the title and index instead of the full object.

and data format.

const DATA = [
  {
    title: "Poissons",
    image: require('../assets/icon_aquarium_style.png')
  },
  {
    title: "Crevettes",
    image: require('../assets/icon_aquarium_style.png')
  },
  {
    title: "Escargots",
    image: require('../assets/icon_aquarium_style.png')
  },
];

Answer 2

In Your Statement

 renderItem={({ item, image }) => 

the second argument should be index,

Instead of ' image ' it should be ' index '

 renderItem={({ item, index }) => 

In order to fetch parameter 'image' from your array you will need to change your code like below:

<View >
  <ImageType image={item.image}/>
  <Item title={item.title} />
</View>

Answer 3

you data object should be an array of objects to map through it, like

var Data = [{title:"Poissons",image:require('../assets/icon_aquarium_style.png')},{title:"Crevettes",image:require('../assets/icon_aquarium_style.png')},{...},{...}]

and then in render item

 {({ item }) => 
       <View >
         <ImageType image={item.image}/>
         <Item title={item.title} />
       </View>
      }