why i got [object object ]

Question

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 = () => {
    this.setState({ isDateTimePickerVisible: true });
  };

  hideDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: false });
  };

  handleDatePicker = ( date ) => {
    // 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 = () => {
    this.setState({ visibleModal: null ,list:[] });
  }; 

  handleListPicker = ( list ) => {
    console.log(list.toString()) 

    this.setState ({
      lists: 'list of start dates ' + list
    })
    this.hideListPicker();
  };

 
  getListViewItem = (item) => {
      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 = () => (
    <View>  
      <Text style={styles.textBox} onPress={this.showDateTimePicker}>Select Date</Text>    
        <DateTimePicker
          isVisible={this.state.isDateTimePickerVisible}
          onConfirm={this.handleDatePicker}
          onCancel={this.hideDateTimePicker}
          minimumDate = {new Date()}
          maximumDate = {addDays(new Date(), 30)}
            />
      
    <View style = {{backgroundColor:'white'}}>
            <View>
              <FlatList horizontal={true} 
                  data = {[{day: '1'},{day: '2'}, {day: '3'},{day: '4'}, {day: '5'},{day: '6'},{day: '7'}]}
                  renderItem={({item, index}) =>
                      <Text style={styles.textBox} key={index}
                            onPress={this.getListViewItem.bind(this, item.day)}>{item.day}
                      </Text>}
              />
              
                <ScrollView
                  style = {{marginHorizontal: 20}} 
                  horizontal={true}
                > 
                  {
                  this.state.list.map((l, index) => {
                      return(
                     index !== this.state.list.length - 1 ? <Text style={{fontSize:30, color:'red'}}>{l}, </Text> : <Text style={{fontSize:30, color:'red'}}>{l}</Text>
                      )
                    })
                  }
                </ScrollView>
                </View>
           </View>
      <Button
      onPress={this.handleListPicker}
        title="Submit"
      />
    </View>
  );

  render() {
     return (
        <>
       <Text style={{fontSize:20}}>Frequency</Text>
            <View style={styles.container} >
                <Text style={styles.textBox}  onPress={() => this.setState({ visibleModal: 'default' })}>Weekly </Text>
              </View>
              <Text style={{fontSize:20, color:'black', textAlign:'center'}}>{this.state.choseDate} </Text>
              <Text style={{fontSize:20, color:'black', textAlign:'center'}}>{this.state.lists} </Text>

           <Modal isVisible={this.state.visibleModal === 'default'} 
             onBackButtonPress={() => this.setState({ visibleModal: null, list:[] },  )}>
             {this.renderModalContent()}
           </Modal> 
         </>
    );
  }
}

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'
  },
});

i have created modal here user select date list and after submit i clear list in setState why i get [object object] in console

 export default class MExample extends Component {
   constructor(props) {
     super(props);
      this.state = {
         list: [],
         visibleModal: false,
         lists: ''
      };
    }

 hideListPicker = () => {
   this.setState({ visibleModal: null ,list:[] });
  }; 

 handleListPicker = ( list ) => {
  console.log(list.toString()) 
  // [object objcet]

  this.setState ({
     lists: 'list of start dates ' + list
   })
  this.hideListPicker();
 };

 render(){
   return( 
    // jsx <Text>{this.state.lists} </Text> // [object object]

   <Button onPress={this.handleListPicker}
    title="Submit"
  />
  )
}

Answer 1

It is because you are passing event as parameter on Button click, which is an object. Now when you use list.toString(), it will convert this event Object into String and show you [Object Object].

You can verify it by using

console.log("data = ",list) 

instead of

console.log(list.toString()) 

Answer 2

Use JSON.stringify instead .toString This question might help you What's the difference in using toString() compared to JSON.stringify()? understand the difference

let x = {a: 123, b: 321};
console.log("toString", x.toString());
console.log("stringified", JSON.stringify(x));

If you're having a circular JSON you might like to visit How can I print a circular structure in a JSON-like format? to see how to console such JSONs

Answer 3

In your case, just remove the toString() function to get what you need.

SIDE NOTE: When use console.log in browser environment, when your object has nested levels, you might get something like

> a: [...]

After clicking > in the web console, you will see the value, but this value is determined at the moment you clicked, not the moment it ran through your console.log.

The best way to get the value at the time you logged it, use console.log(JSON.stringify(object)) instead.

To format the JSON output, passing params to stringify function like below:

console.log(
  JSON.stringify
    (
      obj, // the object you want to log
      null,
      2 // the indent counts by spaces for each level
    )
)

Answer 4

Because method toString returns it. For print object data just pass object to console.log method like console.log(list)