CODEWITHSUNDEEP
javascriptreactjsreact-native
Ken Pham
Ken Pham

Reputation: 295

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

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 list I'm trying to output is like this:

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:

Appreciate all your help !

Upvotes: 0

Views: 573

Answers (1)

Junius L
Junius L

Reputation: 16122

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>
  );
};

Upvotes: 2

Related Questions