React : How to render API response data in fromat of data: Array(i) to react front end?

Question

I need to retrieve names of the books written by a particular author, where author name provided through get request.

My API works fine and retrieves relevant data. In this scenario, I'm getting API response JSON for more than one book.

API response JSON :

[
    {
        "_id": "5cf40d9d74df260aa460a74b",
        "name": "Oliver Twist",
        "author": "Charles Dickens",
        "yearOfPublication": "1839",
        "__v": 0
    },
    {
        "_id": "5cf4115b4b557126a02c6087",
        "name": "David Copperfield ",
        "author": "Charles Dickens",
        "yearOfPublication": "1850",
        "__v": 0
    },
    {
        "_id": "5cf412c54b557126a02c6088",
        "name": "A Christmas Carol ",
        "author": "Charles Dickens",
        "yearOfPublication": "1843",
        "__v": 0
]

I have tried using const books = this.state.data.toString(); and access book names through {books.name}, but it doesn't output the book names. However, when I console.log(), response.data also outputs relevant data successfully as :

0: {_id: "5cf40d9d74df260aa460a74b", name: "Oliver Twist", author: "Charles Dickens", …}
1: {_id: "5cf4115b4b557126a02c6087", name: "David Copperfield ", author: "Charles Dickens", …}
2: {_id: "5cf412c54b557126a02c6088", name: "A Christmas Carol ", author: "Charles Dickens", …}

Can anyone suggest a suitable way to output these values to react front end too ? Thanks in advance.

Why .toString() ? just map over this.state.data, i.e this.data.map(books=> console.log(books.name)) — Code Maniac
– Code Maniac, Commented Jun 4, 2019 at 2:13

linkinmedo · Accepted Answer · 2019-06-04 02:17:20Z

1

You don't need the .toString().

Since you have any array you need to specify which element you want or map over the array.

console.log(this.state.data[0].name);

// or to log all names
this.state.data.map(item => console.log(item.name));

answered Jun 4, 2019 at 2:17

linkinmedo

4301 gold badge4 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

React : How to render API response data in fromat of data: Array(i) to react front end?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related