Unhandled Runtime Error

[anas-aqeel]

I am facing this error

When I am fetching data from API in page.TSX (server component) and then pass it as a prop to my client component.

Here is my code:

Page.tsx

Button.tsx:

[azizijunaid]

i think u need to return and element with content <>Something</> or result could be undefined or null you need to check first either it is given data from api or not.

[ahmad-an]

I think you are getting an object in {result} which can not be rendered. In my point of view, you should try like this {result.name} (object and key ).

[syedshahmirsultan]

Anas, please update the first line of your page.tsx code to this: import Button from '../components/Button/Button';

The problem is in the first line, where you're trying to import the Button component from the wrong place. First, make sure that your Button component is saved in a file named either Button.tsx or button.tsx.

You mentioned the filename as Button.tsx, but in the first line of your page.tsx file, you're trying to import the Button component from ../components/button/Button, which is incorrect. Please fix the import path like I showed above, and your code will work correctly.