Objects are not valid as a React child (found: object with keys {status, originalStatus, data, error}). If you meant to render a collection of children, use an array instead.

[tytom2003]

In some component, call apislice to get data. It will show "Objects are not valid as a React child (found: object with keys {status, originalStatus, data, error}). If you meant to render a collection of children, use an array instead.", but other component call other apislice . it is no error show. How to solve the problem?

thank you very much.

redux toolkit 2.5.1
nodejs 22.11

[EskiMojo14]

as per the error, it looks like you've probably doing something like <div>{error}</div>, where error is the error you get from useQuery. if you want the error message, use error.error instead.

[tytom2003]

my program format to display data:

let content;
if(isLoading) {
content =

Loading...

} else if(isSuccess) {

*** place PrimeReact UI to display data ***

} else if(isError) {
    console.log ('error');
    console.log(getproductdata);
    content = <p>{error}</p>
}

[tytom2003]

i research how to display data for a long time. Example ,

{error}

. But it still show error.

[markerikson]

@tytom2003 : that's the actual issue, right there. You can't just do <div>{someObject}</div> to display it in React. You can display specific fields, like <div>{someObject.message}</div>. But not the whole object at once.

[tytom2003]

i will try using other method to coding component to solve the "Objects are not valid as a React child (found: object with keys {status, originalStatus, data, error}). " error, but why other people are no meeting the error.

[markerikson]

Because your code is wrong :( as I described above.