How to transform arrays as data to a FlatList in React Native?

Question

I'm a React Native beginner and struggling with taking arrays as data in the FlatList component. This is the list I'm trying to output

The result I get is the screen show all the thing as expected except for the FlatList, which is the most crucial part of my app

Here is the TripsListScreen :

import React from 'react';
import {
    View,
    FlatList,
    Text,
    StyleSheet
} from 'react-native'

import PlaceItem from '../components/PlaceItem';
import Place from '../models/place';

const TripsListScreen = props => {
    // I wonder if this declaration is proper ???
    const places = new Place(
        arrayOf_desName,
        arrayOf_desAddress
    )

    const eventNamePassed = props.navigation.getParam('final_eventName');
    const startDatePassed = props.navigation.getParam('final_startDate');
    const endDatePassed = props.navigation.getParam('final_endDate');
    const arrayOf_desName = props.navigation.getParam('final_desName');
    const arrayOf_desAddress = props.navigation.getParam('final_desAddress');

    return(
        <View style={styles.container}>
            <Text> This is your trip. Enjoy!</Text>
            <Text>Event Name: {eventNamePassed}</Text>
            <Text>Stating day: {startDatePassed}</Text>
            <Text>Ending day: {endDatePassed}</Text>
            <FlatList
                data={places}
                keyExtractor={(item) => item.id}
                renderItem={(itemData) => {
                    return(
                        <PlaceItem
                            name={itemData.item.name}
                            address={itemData.item.address}
                        />
                    )
                }}
            />
        </View>
    )
}

export default TripsListScreen;

place.js . A class in my models file which describing how an item looks like in the list I want to output

export default class Place {
    constructor(name, address){
        this.name = name;
        this.address = address
    }
}

Note :

• The arrayOf_desName is an 1 dimensional array containing all the names(typeOf string) I get from the API
• The arrayOf_desAddress is also an 1 dimensional array containing all the address(typeOf string) I get from the API

Appreciate all your help !

Answer 1

You don't need the Place class, since the arrays are of the same length merge them into array of objects and pass the array to Flatlsit.

// create array of objects in this format [{name: '', address: '', id: 34}]
const places = arrayOf_desName.map((name, index) => ({
  name: name,
  address: arrayOf_desAddress[index],
  id: index
}));


const TripsListScreen = props => {

  const eventNamePassed = props.navigation.getParam('final_eventName');
  const startDatePassed = props.navigation.getParam('final_startDate');
  const endDatePassed = props.navigation.getParam('final_endDate');
  const arrayOf_desName = props.navigation.getParam('final_desName');
  const arrayOf_desAddress = props.navigation.getParam('final_desAddress');

  const places = arrayOf_desName.map((name, index) => ({
    name: name,
    address: arrayOf_desAddress[index],
  }));

  return (
    <View style={styles.container}>
      <Text> This is your trip. Enjoy!</Text>
      <Text>Event Name: {eventNamePassed}</Text>
      <Text>Stating day: {startDatePassed}</Text>
      <Text>Ending day: {endDatePassed}</Text>
      <FlatList
        data={places}
        keyExtractor={item => item.id}
        renderItem={itemData => {
          return (
            <PlaceItem
              name={itemData.item.name}
              address={itemData.item.address}
            />
          );
        }}
      />
    </View>
  );
};