Display json data in a reactjs component

Question

I'm new to react and fetch data api. I dont know how to display json data in one of my component. I have use axios to get data from api and this is my return json data

{
  "result": true,
  "items": [
    {
      "excerpt": "egghead is your source for the Badass Portfolio Projects you need to climb the career ladder as a modern web developer.",
      "_id": 360690368,
      "title": "Build the portfolio you need to be a badass web developer.",
      "link": "https://egghead.io/",
      "domain": "egghead.io"
    },
    {
      "excerpt": "From career choices to new purchases, use René Girard’s mimetic theory to resist the herd and forge your own path in life",
      "_id": 359605780,
      "link": "https://psyche.co/guides/how-to-know-what-you-really-want-and-be-free-from-mimetic-desire?ref=refind",
      "title": "How to know what you really want | Psyche Guides",
      "domain": "psyche.co"
    }
  ],
  "count": 2,
  "collectionId": 0
}

Here is list component:

import * as React from "react"
import axios from "axios"

axios.get("https://api.abc.com", {
  method: "get",
  headers: {
    Authorization: `Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxx`,
    "Content-Type": "application/x-www-form-urlencoded",
  },
})
.then(res => {
  const bookmarks = JSON.stringify(res.data)
  console.log(bookmarks)
})
.catch(error => {
  console.error(error)
})

const IndexPage = ({ bookmarks }) => (
  <>
    <h1>Show Data</h1>
    <div>
      {bookmarks.items.map(bookmark => (
        <div>{bookmark.title}</div>
      ))}
    </div>
  </>
)

export default IndexPage

Can anyone help me in displaying the list? Thanks in advance

Answer 1

This is not the way how data fetching in react works... you must fetch your data in components useEffect and store your data in useState hook, which will cause rerender and you can access this data:

import * as React from "react"
import axios from "axios"



const IndexPage = () => (
const [bookmarks, setBookmarks] = React.useState()

React.useEffect(()=>{
axios.get("https://api.abc.com", {
  method: "get",
  headers: {
    Authorization: `Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxx`,
    "Content-Type": "application/x-www-form-urlencoded",
  },
})
.then(res => {
  const bookmarks = JSON.stringify(res.data)
  setBookmarks(bookmarks)
})
.catch(error => {
  console.error(error)
})
},[])
return(
  <>
    <h1>Show Data</h1>
    <div>
      {bookmarks.items.map(bookmark => (
        <div>{bookmark.title}</div>
      ))}
    </div>
  </>
)

---

edit: with custom loading solution:

import * as React from "react"
import axios from "axios"


const IndexPage = () => (
const [loading, setLoading] = React.useState(true)
const [bookmarks, setBookmarks] = React.useState()

React.useEffect(()=>{
axios.get("https://api.abc.com", {
  method: "get",
  headers: {
    Authorization: `Bearer xxxxxxxx-xxxx-xxxx-xxxx-xxxx`,
    "Content-Type": "application/x-www-form-urlencoded",
  },
})
.then(res => {
  const bookmarks = JSON.stringify(res.data)
  setBookmarks(bookmarks)
})
.catch(error => {
  console.error(error)
}).finally(()=>{setLoading(false)});
},[])

if(loading){
 return (<>Loading...</>)
}

return(
  <>
    <h1>Show Data</h1>
    <div>
      {bookmarks.items.map(bookmark => (
        <div>{bookmark.title}</div>
      ))}
    </div>
  </>
)