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

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

CodePudding user response：

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

CodePudding user response：

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;

CodePudding user response：

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>