Hey everyone!
I wanted to know is there a way to pass data from a server component to a client component. I am currently working on an edit page for my website and i want to fetch the data from db and fill it in the form.

This is what i have tried so far:

import React from 'react'
import getStory from '@/actions/story/get-story';
import StoryWriteForm from '@/components/story-write-form';
import NotFound from '@/components/not-found';
import CreateStoryValidator from '@/validators/create-story-validator';

type PageProps = {
  params: { story: string },
  searchParams: {}
};

async function Page(props: PageProps) {
  const { params } = props;
  const storyId = params.story;
  const story = await getStory(storyId);

  if (!story) return <NotFound title="Story" search={`Story '${storyId}'`} />;

  return (
    <StoryWriteForm 
      form={{
        title: story.title,
        description: story.description,
        genre: story.genre,
        image: story.image,
        public: story.public,
        status: story.status,
        tags: story.tags
      }}
      route='/api/story'
      validator={CreateStoryValidator}
    />
  )
}

export default Page;