Why does this log [object Object], [object Object]?

Question

I have this Api call, which returns my contact list, and is supposed to save them as an array of objects into this.state.contacts, so that I can of course reference them in other places.

The line that says console.log(result) logs exactly what I expect... which is an array of objects containing all of my contact list data.

But after that, the console.log(Contacts: ${this.state.contacts} logs instead of the same data in result:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[obj

class Database extends Component {
        constructor(props){
            super(props);

            this.state = {
                clients: [],
                contacts: []
            }
        }

        componentDidMount() {
            fetch(API_URL + `/contacts/all`)
                .then(res => {
                     if (!res.ok) {
                         throw new Error();
                       }
                       return res.json();
                      })
                        .then((result) => {
                            this.setState({ contacts: result });
                            console.log(result);
                            console.log(`Contacts: ${this.state.contacts}`);
                        })
                        .catch(error => {
                            console.log(error);
                        })
                );
        }

What am I missing here? I feel like I've done it like this before and it worked fine.

Andy · Accepted Answer · 2021-03-23 20:25:56Z

2

This is because there is type coercion in your expression. Try to output this: console.log('Contacts: ${JSON.stringify(this.state.contacts)}'); so your object wont be called by ToString but rather JSON.stringify will work first.

answered Mar 23, 2021 at 20:25

Andy

5243 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian Fritz · Accepted Answer · 2021-03-23 20:25:40Z

1

That's because you are asking JS to turn your object (this.state.contacts) into a string. Some options:

console.log(`Contacts: ${JSON.stringify(this.state.contacts)}`);
console.log(`Contacts: ${JSON.stringify(this.state.contacts, true, 2)}`); // pretty-reprinted JSON
console.log('Contacts:', this.state.contacts);

answered Mar 23, 2021 at 20:25

Christian Fritz

21.5k3 gold badges48 silver badges82 bronze badges

Comments

user15434173 · Accepted Answer · 2021-03-23 20:26:06Z

0

Use JSON.stringify(object) to change it to a string before you use console.log.

answered Mar 23, 2021 at 20:26

user15434173

Collectives™ on Stack Overflow

Why does this log [object Object], [object Object]?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related