React-native Flatlist doesn't list my json local file

Question

I met an issue with my Flatlist in Board.js which doesn't display the content of a json data located inside a file BoardData.js.

However I ve console.log the import of the BoardData and seems the json isfine.But when Istart to read on some data via the flat list. the data are undefined.

See my BoardData.js file :

var BoardData = [

    {
        "id":"1",
        "status": "declared",
        "date": "03-DEC-2019",
        "category": "Fuite d'eau",
        "event_info": "Contact du Plombier",
        "adress": "2 rue de la queuleuleu, 31200 Toulouse",
        "imageUrl": "..data/photo/photo_123456.webp"
    },
    {

        "id":"2",
        "status": "run",
        "date": "12-JAN-2020",
        "category": "eclairage",
        "event_info": "Contact du Plombier",
        "adress": "3 impasse alphonse-daudet, 31700 Blagnac",
        "imageUrl": "../data/photo/photo_234459.jpg"
    },
     {
        "id":"3",
        "status": "declared",
        "date": "20-FEB-2020",
        "category": "chaussee",
        "event_info": "Contact du Plombier",
        "adress": "50 avenue de Fronton, 31140 Aucamville",
        "imageUrl": "../data/photo/photo_458049.jpg"
    },

    {
        "id":"4",
        "status": "closed",
        "date": "04-DEC-2019",
        "category": "Poubelle",
        "event_info": "Contact du Plombier",
        "adress": "3 rue de la queuleuleu, 31200 Toulouse",
        "imageUrl": "../data/photo/photo_123456.webp"
    },

    {
        "id":"5",
        "status": "closed",
        "date": "13-JAN-2020",
        "category": "Ascenceur",
        "event_info": "Contact du Plombier",
        "adress": "4 impasse alphonse-daudet, 31700 Blagnac",
        "imageUrl": "../data/photo/photo_234459.jpg"
    },

    {
        "id":"6",
        "status": "run",
        "date": "21-FEB-2020",
        "category": "chaussee",
        "event_info": "Contact du Plombier",
        "adress": "52 avenue de Fronton, 31140 Aucamville",
        "imageUrl": "../data/photo/photo_458049.jpg"
    },

];

module.exports = BoardData;

Then see my code to render my FlatList:

import React, { Component } from 'react';
import {
    FlatList, ScrollView, StyleSheet, Platform, View, Image, Dimensions, TouchableOpacity,
  } from 'react-native';

import {Card, CardItem, Left, Right, Thumbnail, Title, Subtitle} from 'native-base';

import BoardData from '../data/BoardData.js'



console.log ('BoardData : ', BoardData)

export default class BoardScreen extends Component {
    constructor(){

        super();
        this.state = {
            boarderstatus: 'declared',
            myCases: [],

        }

    }

    componentDidMount () {
        this.setState({myCases:BoardData })

    }

    // Synchronization concerning the gesture
    async setBoarder(value){

        console.log("SETBoarder value : " + value)
        this.setState({boarderstatus:value })
        console.log("SETBoarder boarderstatus : " + value)


    }



    renderCard(item,index){
if (item.category === this.state.boarderstatus)
        {
            return (

                <TouchableOpacity styles={style.btn}>

                <Card>
                    <CardItem>
                        <Left>
                            <Thumbnail 

                            source={require('../data/photo/photo_234459.jpg')}
                            style={{width:80,height:80}}/>
                            <Block left style={{top:-15, left:5}}>
                                <Title>{item.category}</Title>
                                <Subtitle>{item.date}</Subtitle>
                            </Block>

                        </Left>

                        <Right>
                            <Block>

                            </Block>
                        </Right>
                    </CardItem>

                </Card>

                </TouchableOpacity>

            );
        }


    }
    render() {
        return (
            ...

                    <FlatList
                        data={BoardData}
                        keyExtractor={(item)=>item.id}
                        renderItem={(item, index) => this.renderCard(item, index)}
                    />



        );
    }
}

Answer 1

Ok Fix :

Just instance BoardData json object to BoardData here is the code:

<FlatList data={BoardData.BoardData}
          keyExtractor={(item)=>item.id}
          renderItem={(item, index) => this.renderCard(item, index)}/>