I'm trying to edit this URL shortener project that someone else made. I get this error when submitting the form. (Typing in a url and custom alias)

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

I'm not sure where to begin to solve the issue. Any help would be great! I am pretty new to programming but just getting this to function like it does here would be a great start!

Github code:

Code Sandbox link:

Screen shot of error

I'm trying to edit this URL shortener project that someone else made. I get this error when submitting the form. (Typing in a url and custom alias)

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

I'm not sure where to begin to solve the issue. Any help would be great! I am pretty new to programming but just getting this to function like it does here would be a great start!

Github code: https://github.com/onderonur/onurl

Code Sandbox link: https://codesandbox.io/s/exciting-wave-p79xi

Screen shot of error

• javascript
• reactjs
• typescript
• next.js

1 Answer 1

I am sorry that no one has responded in the last 5 months, but I just came across this post and I thought I would help. I have encountered this error before when using Next JS, and it happened to me when I was trying to display an object on the browser. In this case, the error object was trying to be displayed, which you can't do in React.

This is an example of what the error object looks like:

{"statusCode":500,"message":"Invalid connection string"} 

In the 5th line of this block of code, you can see that the whole error object is trying to be displayed, which as the error states, cannot be done in React:

{(data || error) && (
      <Alert status={error ? 'error' : 'success'} marginY={2}>
          <AlertIcon />
          <AlertTitle>
                  {error || 'Your new URL has been created successfully!'}
          </AlertTitle>
      </Alert>
)}

Solution #1

To fix this, you have to make it so that only a primitive type, like a string, is being displayed. To do this, you can simply change the error case for the reducer function to return the message property (string) of the error instead of the whole object:

  const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'request':
      return { ...state, data: undefined, error: undefined };
    case 'success':
      return { ...state, data: action.response.data };
    case 'error':
      return { ...state, error: action.error.response?.data.message };
    default:
      throw new Error();
  }
};

I changed line 8 of the code block above from:

      return { ...state, error: action.error.response?.data};

to:

      return { ...state, error: action.error.response?.data.message};

This way, only the message property of the error response can be stored in the state, instead of the whole error object, which once again, cannot be directly showed because it's not a primitive type.

Solution #1 CodeSandbox: First solution code on CodeSandbox

Solution #2

Another way you can fix this is by changing the JSX in the return() so that it only displays error.message (string) instead of error (object);

{(data || error) && (
         <Alert status={error ? 'error' : 'success'} marginY={2}>
            <AlertIcon />
            <AlertTitle>
              {error!.message ||
                'Your new URL has been created successfully!'}
            </AlertTitle>
         </Alert>
)}

I changed line 5 in the block of code above from:

<AlertTitle>
     {error|| 'Your new URL has been created successfully!'}
</AlertTitle>

to:

<AlertTitle>
      {error!.message|| 'Your new URL has been created successfully!'}
</AlertTitle>

The ! in error!.message is meant to force Typescript to accept that the error object exists, instead of giving us an error that the object could possibly be null. We are already checking if the error object exists before rendering this, so it is fine if we just use !.

This technically does work, though because this project uses Typescript, you have to modify the State interface so that it has the proper type. This is how the State interface should be:

interface State {
   data: Maybe<ShortUrlData>;
   error:
     {
         statusCode: number;
         message: string;
       }
     | undefined;
 }

This way the Typescript compiler won't complain about the property message not being defined for the error object, since before, the State interface was this:

interface State {
   data: Maybe<ShortUrlData>;
   error: Maybe<String>;
 }

Since in this case we are sending the whole error object in the dispatcher, the Maybe<String> type would not be correct for it

Solution #2 CodeSandbox: Second solution code on CodeSandbox

I hope this helps. Please let me know if there is something I can explain better or some part of the explanation that I should change. In terms of why the error response is being sent from the backend in the first place, I will need to investigate a little further into the code and see why it is sending an error at all. I will update the answer once I have found something.