How do I make an array of objects in react JS

Question

My API gives me data in the following format:

{
  status: 200,
  certificateTypes: [
    {
      id: 1,
      name: 'Gasmeting',
      created_at: '2023-04-25T07:15:55.000000Z',
      updated_at: '2023-04-25T07:15:55.000000Z',
    },
    {
      id: 2,
      name: 'Mangatwacht',
      created_at: '2023-04-25T07:16:13.000000Z',
      updated_at: '2023-04-25T07:16:13.000000Z',
    },
  ],
    // ...
}

I used the following function to put the data in an useState array.

const [certificateTypes, setCertificateTypes] = useState([]);

const fetchCertificateTypes = async () => {
  const response = await getCertificateTypes();

  if (response.status === 200) {
    setCertificateTypes(response.certificateTypes);
    console.log('in fetch ' + certificateTypes);
  }
};

Now printing the data with:

console.log(certificateTypes)

gives the following result:

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

My initial thought was that I needed to JSON.parse the data I fetched, but this does not seem to be the case..

How can turn this data into an array so I can properly work with it?

your are logging using concatenation which coerces the objects to strings console.log('in fetch ' + certificateTypes);. You can either separate with a comma console.log('in fetch: ', certificateTypes); or explicitly stringify console.log('in fetch ' + JSON.stringify(certificateTypes, null, 2)); — pilchard
– pilchard, Commented Apr 29, 2023 at 17:38
Does this answer your question? Javascript console.log(object) vs. concatenating string — pilchard
– pilchard, Commented Apr 29, 2023 at 17:40

Rupali Yadav · Accepted Answer · 2023-04-30 04:04:09Z

2

When you try to concatenate a string with an certificateTypes variable using the + operator, JavaScript automatically converts the array to a string representation, which is "[object Object]". And the default string representation of an array is "[object Object]".

updating state in ReactJS is an asynchronous process. When you call setState() to update the state of a component, React schedules the update to occur in the future, rather than updating the state immediately. This means here when you console.log('in fetch ' + certificateTypes); the updated state may not be immediately available after calling setCertificateTypes(response.certificateTypes).

to console.log your certificateTypes, write a console.log(certificateTypes) before you return a jsx (or anywhere outside useEffect);

edited Apr 30, 2023 at 4:04

answered Apr 30, 2023 at 3:52

Rupali Yadav

1511 silver badge4 bronze badges

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

Comments

Thomas Frank · Accepted Answer · 2023-04-29 23:13:19Z

1

Simply change your console.log to:

console.log('in fetch ', certificateTypes);

answered Apr 29, 2023 at 23:13

Thomas Frank

1,4256 silver badges10 bronze badges

Collectives™ on Stack Overflow

How do I make an array of objects in react JS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related