how to fetch data from an api and display it as raw data on the front end?

Question

Okay so its been long i did react. my problem is very easy, i just dont know how to do it. Basically i am fetching data from an api and putting it inside a state. i basically want to display that data im fetching as raw data instead of mapping over it. this is what i mean.

This is my component:

 const App = () => {
 const [info, setInfo] = useState([])

 const getData = async () => {
      const res = await fetch ('https://dummyjson.com/products/')
      const data = await res.json()
      setInfo(data.products)
 }
 console.log(info)
  

 return(
   <div>
     {info}
     <button onClick={getData}>click me</button>
   </div>

   )
 }

 export default App;

Basically when i click the button, i want the info to be displayed like this on the browser:

{
  "id": 1,
  "title": "iPhone 9",
  "description": "An apple mobile which is nothing like apple",
  "price": 549,
  "discountPercentage": 12.96,
  "rating": 4.69,
  "stock": 94,
  "brand": "Apple",
  "category": "smartphones",
  "thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
  "images": [
    "https://i.dummyjson.com/data/products/1/1.jpg",
    "https://i.dummyjson.com/data/products/1/2.jpg",
    "https://i.dummyjson.com/data/products/1/3.jpg",
    "https://i.dummyjson.com/data/products/1/4.jpg",
    "https://i.dummyjson.com/data/products/1/thumbnail.jpg"
  ]
}

That is all. i just want to display the raw json data on the front end. but as my code is now, everytime i click the button i get this error:

Objects are not valid as a React child (found: object with keys {id, title, description, price, discountPercentage, rating, stock, brand, category, thumbnail, images}). If you meant to render a collection of children, use an array instead

score 2 · Answer 1 · answered Dec 02 '22 at 16:16

2

Stringify your JSON data <pre>{JSON.stringify(data)}</pre> or Check out this thread with how to Pretty Printing JSON with React

answered Dec 02 '22 at 16:16

David

705
1
6
22

Amila Senadheera · Answer 2 · 2022-12-02T16:23:34.577

The issue is JSON is not valid to display directly. That's what the error says:

Objects are not valid as a React child (found: object with keys {id, title, description, price, discountPercentage, rating, stock, brand, category, thumbnail, images}). If you meant to render a collection of children, use an array instead

You can stringify the info to view it as a whole:

const App = () => {
  const [info, setInfo] = React.useState([]);

  const getData = () => {
    fetch("https://dummyjson.com/products/")
      .then((res) => res.json())
      .then((data) => {
        setInfo(data.products);
      });
  };


  return (
    <div>
      {JSON.stringify(info)}
      <button onClick={getData}>click me</button>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

score 0 · Answer 3 · answered Dec 02 '22 at 16:18

You can use JSON.stringify to stringify the value and use pre tag to prettify it. as follows:

const App = () => {
const [info, setInfo] = useState([])

const getData = async () => {
  const res = await fetch ('https://dummyjson.com/products/')
  const data = await res.json()
  setInfo(data.products)
 }
console.log(info)
  

return (
   <div>
     <pre>{JSON.stringify(info)}</pre>
     <button onClick={getData}>click me</button>
   </div>
  )
}

export default App;

how to fetch data from an api and display it as raw data on the front end?

3 Answers3