React Native render FlatList conditional

Question

I have a question regarding React Native FlatList.

I have a FlatList that gets my dataZ state as the data prop - dataZ is an Array that gets filled in by my fetchcall. The response of my fetch call looks like this:

[
  {
    "activitydate": "2019-08-01T22:00:00.000Z",
    "phaseid": 7667,
    "time": 360,
    "userid": 138,
    "zkub": " "
  },
  {
    "activitydate": "2019-08-04T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-05T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-06T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-07T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-08T22:00:00.000Z",
    "phaseid": null,
    "time": 456,
    "userid": 138,
    "zkub": "K"
  },
  {
    "activitydate": "2019-08-11T22:00:00.000Z",
    "phaseid": 7667,
    "time": 480,
    "userid": 138,
    "zkub": " "
  }
]

I set the state of dataZ to be the res when I console.log it I get this:

stateDataZ  [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]...

This here is my FlatList:

 <FlatList                                   
      style={{ marginVertical: 20 }}
      numColumns={2}  
      keyExtractor={(item, index) => index}
      data={this.state.dataZ}
      renderItem = {({ item }) => {
        //  console.log("Item in RenderItem : " + typeof item)

        if(Array.isArray(this.state.dataZ)) {

          return <MonatsView
          navigate={() => this.props.navigation.navigate("Tag")}
          tag={moment(item.activitydate).format("DD-MM")}
          tagDesc={moment(item.activitydate).day()}
          phase={item.phaseid}
          time={item.time}
          zkub={item.zkub}
          />
        } 
        else {
          return console.log("DATA IS NO ARRAY????")
        }
      }
      }
    />

If there are some entrys in the DB I get the component displayed properly.

Now I have some questions:

1. How can I check if the dataZ state is empty and therefor render some empty <MonatsView/> component ?

2. Is it possible to always render the amount of fields for the given days in a month (like 31 fields for August for ex.) and then fill in the ones that would hold data by looking at the activitydate field and for example filling in the data for the 11.08.2019 where the activitydate is 2019-08-11?

3. I need to tell my Flatlist that if there are two same activity dates it has to take both objects with the date in that array and only give me back one <MonatsView /> component instead of two. For example:

[
  {
    "activitydate": "2019-08-01T22:00:00.000Z",
    "phaseid": 7667,
    "time": 360,
    "userid": 138,
    "zkub": " "
  },
  {
    "activitydate": "2019-08-01T22:00:00.000Z",
    "phaseid": 7637,
    "time": 120,
    "userid": 138,
    "zkub": " "
  }
]

These two objects should only render one <MonatsView/> component - but beacuse my renderItem func is calling everything on each item I dont know how to do this.

Here is my Fetchcall:

__SOME CODE__      (state={ dataZ = []} - how my dataZ looks like)
await fetch(
      URL with params
    )
      .then(res => res.json())
      .then(res => {
        console.log("ResArray?? " + JSON.stringify(res[0]));
        this.setState({
          dataZ: res
        });
        console.log("stateDataZ  " + this.state.dataZ);
      })
      .catch(err => console.log(err));

To my question 1: I just found ListEmptyComponent but when I say that it should take <MonatsView/> here it only displays 1 which makes sense because it looks at data. I would need to set data to an array of numbers like 1-31 for example. But I can't because data needs to be my dataZ state.

Answer 1

Yes, you can check empty array value and can render another view by using this

{
(this.state.dataZ.length!=0)?
 <FlatList                                   
      style={{ marginVertical: 20 }}
      numColumns={2}  
      keyExtractor={(item, index) => index}
      data={this.state.dataZ}
      renderItem = {({ item }) => {
        //  console.log("Item in RenderItem : " + typeof item)

        if(Array.isArray(this.state.dataZ)) {

          return <MonatsView
          navigate={() => this.props.navigation.navigate("Tag")}
          tag={moment(item.activitydate).format("DD-MM")}
          tagDesc={moment(item.activitydate).day()}
          phase={item.phaseid}
          time={item.time}
          zkub={item.zkub}
          />
        } 
        else {
          return console.log("DATA IS NO ARRAY????")
        }
      }
      }
    />
:
<View> .--------**write here any other view** ----- </View>
}

Point 2: for this you can use:

• use the section list to show only one month data (https://facebook.github.io/react-native/docs/sectionlist).

• you should modify the current array object according to months wise and render a view and set according to that.

Answer 2

You can check is empty by using length of Array like

this.state.dataZ.length == 0 ? do some thing here if true : do some thing here if false

and FlatList have prop ListEmptyComponent . It'll call when this.state.dataZ is empty. eg:

<FlatList                                   
      style={{ marginVertical: 20 }}
      numColumns={2}  
      keyExtractor={(item, index) => index}
      data={this.state.dataZ}
      renderItem = {({ item }) => {
        //  console.log("Item in RenderItem : " + typeof item)
        if(Array.isArray(this.state.dataZ)) {

          return <MonatsView
          navigate={() => this.props.navigation.navigate("Tag")}
          tag={moment(item.activitydate).format("DD-MM")}
          tagDesc={moment(item.activitydate).day()}
          phase={item.phaseid}
          time={item.time}
          zkub={item.zkub}
          />
        } 
        else {
          return console.log("DATA IS NO ARRAY????")
        }
      }
      }
      ListEmptyComponent={
        <EmptyComponent title="Nothing here, come back later.." />
      }
    />