title: why i got [object object ]
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { Button, View ,Text ,StyleSheet, FlatList, ScrollView} from "react-native";
  import DateTimePicker from "react-native-modal-datetime-picker";
  import moment from 'moment'
  import addDays from 'date-fns/addDays'
  import Modal from 'react-native-modal';
  
  export default class MExample extends Component {
    constructor(props) {
      super(props);
      this.state = {
        list: [],
        day:[],
        isDateTimePickerVisible: false,
        choseDate:'',
        visibleModal: false,
        lists:''
      };
    }
  
  
    showDateTimePicker = () =&gt; {
      this.setState({ isDateTimePickerVisible: true });
    };
  
    hideDateTimePicker = () =&gt; {
      this.setState({ isDateTimePickerVisible: false });
    };
  
    handleDatePicker = ( date ) =&gt; {
      // console.log("A date has been picked:", date); here date come correctly
      this.setState ({
        choseDate: 'Subscription start date ' + moment(date).format('MMMM, Do YYYY '),
      })
      this.hideDateTimePicker();
    };
  
    hideListPicker = () =&gt; {
      this.setState({ visibleModal: null ,list:[] });
    }; 
  
    handleListPicker = ( list ) =&gt; {
      console.log(list.toString()) 
  
      this.setState ({
        lists: 'list of start dates ' + list
      })
      this.hideListPicker();
    };
  
   
    getListViewItem = (item) =&gt; {
        let newList = this.state.list;
        if (newList.includes(item)) {
          let index = newList.indexOf(item);
          newList.splice(index,1);
          } else {
          newList.push(item);
        }
        this.setState({
          list: newList,
        });
   }
  
    renderModalContent = () =&gt; (
      &lt;View&gt;  
        &lt;Text style={styles.textBox} onPress={this.showDateTimePicker}&gt;Select Date&lt;/Text&gt;    
          &lt;DateTimePicker
            isVisible={this.state.isDateTimePickerVisible}
            onConfirm={this.handleDatePicker}
            onCancel={this.hideDateTimePicker}
            minimumDate = {new Date()}
            maximumDate = {addDays(new Date(), 30)}
              /&gt;
        
      &lt;View style = {{backgroundColor:'white'}}&gt;
              &lt;View&gt;
                &lt;FlatList horizontal={true} 
                    data = {[{day: '1'},{day: '2'}, {day: '3'},{day: '4'}, {day: '5'},{day: '6'},{day: '7'}]}
                    renderItem={({item, index}) =&gt;
                        &lt;Text style={styles.textBox} key={index}
                              onPress={this.getListViewItem.bind(this, item.day)}&gt;{item.day}
                        &lt;/Text&gt;}
                /&gt;
                
                  &lt;ScrollView
                    style = {{marginHorizontal: 20}} 
                    horizontal={true}
                  &gt; 
                    {
                    this.state.list.map((l, index) =&gt; {
                        return(
                       index !== this.state.list.length - 1 ? &lt;Text style={{fontSize:30, color:'red'}}&gt;{l}, &lt;/Text&gt; : &lt;Text style={{fontSize:30, color:'red'}}&gt;{l}&lt;/Text&gt;
                        )
                      })
                    }
                  &lt;/ScrollView&gt;
                  &lt;/View&gt;
             &lt;/View&gt;
        &lt;Button
        onPress={this.handleListPicker}
          title="Submit"
        /&gt;
      &lt;/View&gt;
    );
  
    render() {
       return (
          &lt;&gt;
         &lt;Text style={{fontSize:20}}&gt;Frequency&lt;/Text&gt;
              &lt;View style={styles.container} &gt;
                  &lt;Text style={styles.textBox}  onPress={() =&gt; this.setState({ visibleModal: 'default' })}&gt;Weekly &lt;/Text&gt;
                &lt;/View&gt;
                &lt;Text style={{fontSize:20, color:'black', textAlign:'center'}}&gt;{this.state.choseDate} &lt;/Text&gt;
                &lt;Text style={{fontSize:20, color:'black', textAlign:'center'}}&gt;{this.state.lists} &lt;/Text&gt;
  
             &lt;Modal isVisible={this.state.visibleModal === 'default'} 
               onBackButtonPress={() =&gt; this.setState({ visibleModal: null, list:[] },  )}&gt;
               {this.renderModalContent()}
             &lt;/Modal&gt; 
           &lt;/&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container:{
      flexDirection:'row', 
      flexWrap:'wrap',
      justifyContent:'center',
    },
    textBox :{
      fontSize:20,
      textAlign:'center',  
      borderWidth: 1,
      borderRadius: 12,
      borderColor: "#CBCBCB",
      margin:10,
      padding:5,
      backgroundColor:'#a0a3a3'
    },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>i have created modal <a href="https://i.stack.imgur.com/3Yl5y.png" rel="nofollow noreferrer">here user select date list and after submit i clear list in setState</a>
  why i get <code>[object object]</code> in console</p>
  
  <pre><code> export default class MExample extends Component {
     constructor(props) {
       super(props);
        this.state = {
           list: [],
           visibleModal: false,
           lists: ''
        };
      }
  
   hideListPicker = () =&gt; {
     this.setState({ visibleModal: null ,list:[] });
    }; 
  
   handleListPicker = ( list ) =&gt; {
    console.log(list.toString()) 
    // [object objcet]
  
    this.setState ({
       lists: 'list of start dates ' + list
     })
    this.hideListPicker();
   };
  
   render(){
     return( 
      // jsx &lt;Text&gt;{this.state.lists} &lt;/Text&gt; // [object object]
  
     &lt;Button onPress={this.handleListPicker}
      title="Submit"
    /&gt;
    )
  }
  </code></pre>