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

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