React displaying blank page when trying to show data using conditional rendering?-CodePudding

I have been trying to achieve conditional rendering in react in the way that it will display "Loading.." if data is not fetched else it will display the data fetched. The data it will get from get server is in json format and when I try to publish that data I encounter a blank page. I have tried other things like trying to publish plain text on success instead of data presented and in that case I got the page with data.

Below is the code file in which error is arising.

import { useState, useEffect } from 'react'

function changeFeed(bookData){
   let elem;
   if (Object.keys(bookData).length === 0) elem = <p>Loading</p>
   else 
    elem = <p>{bookData}</p>

   return elem;
}

export default function Feed() {
   const [bookData, setBookData] = useState({});

   useEffect(() => {
     fetch('/book')
     .then(res => res.json())
     .then(data => setBookData(data))
     .catch(err => console.error("Custom err: ",err))
   }, []);

   return (
     <div>
      {changeFeed(bookData)}
     </div>
   )
}

The error i'm encountering is display:

  Uncaught Error: Objects are not valid as a React child (found: object with keys {data}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:14757:1)
    at reconcileChildFibers (react-dom.development.js:15698:1)
    at reconcileChildren (react-dom.development.js:19971:1)
    at updateHostComponent$1 (react-dom.development.js:20733:1)
    at beginWork (react-dom.development.js:22447:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)
    at beginWork$1 (react-dom.development.js:27405:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
react-dom.development.js:18572 The above error occurred in the <p> component:

    at p
    at div
    at Feed (http://localhost:3000/static/js/bundle.js:129:82)
    at div
    at http://localhost:3000/static/js/bundle.js:1449:66
    at Grid (http://localhost:3000/static/js/bundle.js:8640:87)
    at div
    at http://localhost:3000/static/js/bundle.js:1449:66
    at Grid (http://localhost:3000/static/js/bundle.js:8640:87)
    at div
    at http://localhost:3000/static/js/bundle.js:1449:66
    at Box (http://localhost:3000/static/js/bundle.js:19329:72)
    at Home
    at InnerThemeProvider (http://localhost:3000/static/js/bundle.js:18542:70)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:18199:5)
    at ThemeProvider (http://localhost:3000/static/js/bundle.js:18562:5)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18572
react-dom.development.js:26874 Uncaught Error: Objects are not valid as a React child (found: object with keys {data}). If you meant to render a collection of children, use an array instead.
    at throwOnInvalidObjectType (react-dom.development.js:14757:1)
    at reconcileChildFibers (react-dom.development.js:15698:1)
    at reconcileChildren (react-dom.development.js:19971:1)
    at updateHostComponent$1 (react-dom.development.js:20733:1)
    at beginWork (react-dom.development.js:22447:1)
    at beginWork$1 (react-dom.development.js:27381:1)
    at performUnitOfWork (react-dom.development.js:26513:1)
    at workLoopSync (react-dom.development.js:26422:1)
    at renderRootSync (react-dom.development.js:26390:1)
    at recoverFromConcurrentError (react-dom.development.js:25806:1)
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

My data being passed is an array of json, something like this:

0: {_id: '628a333def2ed59e884896b2', title: 'everything need to be known', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: '69-ass-69', …}
1: {_id: '628a39263e2377b56cb55a28', title: 'everyhton needto knpe', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: '159', …}
2: {_id: '628a3a2a66c6bb5f9c8d39c3', title: 'jkejvnskre vkn', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: 'lkrmvle', …}
3: {_id: '628a3aa53de4e9fa6f4a6124', title: 'jcnj jflkl kK', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: 'lck lsdk', …}
4: {_id: '628a5bad4c97c8d9a5828dc7', title: 'avrj f,lskfjf', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: 'lkv skjf ', …}
5: {_id: '628a5c4baa89e5d3a93f6398', title: 'k cjdkj,fk;klad', author_id: '6281de055717560ea372c656', summary: 'Summary need to be updated plz check after sometime', isbn: 'klc wjd', …}

CodePudding user response：

You can't do <p>{bookData}</p> if bookData is an object. The value in {value} should be a primitive data type like string, number etc. It cannot be an object.

I am not sure how your object structure looks like, you should change it to something like -

<p>{bookData[0].title}</p>

If you are looking to output all bookData you can use the Array.map function

const elem = bookData.map(book => <p>{book.title}</p>);