0

I have a question regarding data passing between parent/child element. The parent element StylePage retrieves data via SWR which retrieves the data without problem and the application is able to display it with a Text. Problem is that it isn't being passed to the child element (StyleCard). The same goes with currentAssets. What have I missed here that might cause the props not being passed to StyleCard?

// StylePage
export default function StylePage(): JSX.Element {
  const { data } = useSWR(`/api/styles/style-number/${styleNumber}`);

  const currentAssets = useMemo(() => {
    const result: IAsset[] = data?.assets?.map(x => {
      return {
            perspective_number: x.perspective.number,
            storage_url: x.file.storageUrl
          } as IAsset
    })
    return result;
  }, [data?.assets]);

  return (
    <Stack spacing={6}>
       <Stack ml="100px" minWidth="480px" maxWidth="480px">

        <StyleCard
           assets={currentAssets}               // Has value but doesn't display
           styleNumber={data?.styleNumber} />   // Has value but doesn't display 
        <Text>{data?.name}</Text>               // Displays value 

       </Stack>
     </Stack>
  );
}

// StyleCard
export interface IStyleCard{
   assets: IAsset[],
   styleNumber: number
}

export function StyleCard(
  props: IStyleCard
): JSX.Element {

  return (
    <Stack>
      <Text> Props Assets {JSON.stringify(props.assets)}</Text> // Props.assets is empty
      <Text> Props styleNumber {props.styleNumber}</Text>       // props.styleNumber is blank
    </Stack>
  );
}

Edit: There's a global configuration SWRConfig (source) which is wrapped around the top layer component. That's why fetcher isn't specified in StylePage. Also fixing a typo in the code sample.

    <SWRConfig
      value={{
        refreshInterval: 3000,
        fetcher: (url) =>
          axios
            .get(url)
            .then((res) => res.data),
      }}
    >

    ... 

    </SWRConfig>
DLO
  • 914
  • 1
  • 13
  • 30
  • 1
    There's a typo in type definition of `StyleCard`. It should be `assets` instead of `asset` – NeERAJ TK Aug 29 '21 at 18:00
  • I see in the swr documentation that they are using a fetcher as a second parameter `useSWR('/api/data', fetcher)`. I don't see it in your code, is that normal ? Are you sure the data are corretly retrieved currently ? – Olivier Boissé Aug 29 '21 at 18:01
  • @NeERAJTK Thanks, that was a typo in the code sample. The behaviour remains the same. – DLO Aug 30 '21 at 05:54
  • @OlivierBoissé Thanks for your reply. I edited the question and added an explanation on why the fetcher isn't specified. – DLO Aug 30 '21 at 05:56
  • Are you certain you're getting the expected response from the `axios` request? – juliomalves Aug 31 '21 at 14:33

0 Answers0