Array of objects returns empty JSX elements-CodePudding

I'm working on a time management app for a client and I'm using react native. When the user creates a new task, the task information is then pushed into an array of objects. It's an empty initial state. But for some reason I have an empty card in the ScrollView. I've even tried to manually set if the title of the task is not empty then return the jsx element, but no luck. Any idea what I'm doing incorrectly.

The function to create tasks

  Create_Task = () => {
    let {daily, Title, TaskTime} = this.state;
    daily.shift();
    daily.push({ID: this.makeid(5), TaskName: Title, TaskTime: TaskTime});    
    this.setState({daily: [...this.state.daily, Title]});
  };

The initial state of the array and all the information

const initialState = [{ID: '', TaskName: '', TaskTime: ''}];
 this.state = {
   daily: initialState,      
   Title: '',
   TaskTime: '',
}

Returning JSX elements

<View style={styles.tasks}>
          <ScrollView>
            {this.state.daily.map(x => {
              if (x.TaskName !== ' '){
                return (
                <Card style={styles.card} key={x.ID}>
                  <View style={styles.cardView}>
                    <TouchableOpacity
                      style={styles.btnComplete}></TouchableOpacity>
                    <Text style={styles.task_Title}>{x.TaskName}</Text>
                    <Text style={styles.taskTime}>{x.TaskTime}</Text>
                  </View>
                  </Card>
                );    
              }              
            })}
          </ScrollView>
        </View>

CodePudding user response：

Your initial state has an Object in it when you are initialing it. Just initialing with an empty array should solve your problem.

const initialState = [];
 this.state = {
   daily: initialState,      
   Title: '',
   TaskTime: '',
}