CODEWITHSUNDEEP
next.jsserver-action
Neel Chalke
Neel Chalke

Reputation: 1

I am trying to trigger a handleClick event inside a client component which is mapped in a server component, but button is not getting triggered

A client component called Card.tsx is being mapped inside a Server component which is async where it is fetching the data and mapping the data to the Card component, the code for Server Component is as follows:

// ServerSideProps.tsx
interface dataSchem {
    Title: string;
    Message: string;
    
}

export default async function Page() {

    let res = await fetch('https://66112f5c95fdb62f24ecab0d.mockapi.io/TitleMessage')
    let data : dataSchem[] = await res.json()


  return (
    <div className='p-6 flex flex-col gap-4 justify-center items-center max-h-full overflow-y-auto'>
        {data.map(({Title,Message},index) => (
      <Card key={index} title={Title} message={Message}  />
        ))}
    </div>
  )
}

export default function page({title,message} : {title: string; message: string}) {
   
     const handleClick = () => {
        // Dispatch the action with the title and message as payload
        // dispatch(setTitleAndMessage({ title, message }));
        console.log("line number:13",   title , message);
        console.log("jii")
      };


    return (
        <>
        <div  className='w-[50%]  flex flex-col p-4 gap-2 bg-red-200 rounded-md'>
            <p className="text-black font-bold">Title {title}</p>
            <p className="text-black font-bold">Message {message}</p>
            <div>
        <button className="w-full bg-slate-400 text-black font-bold" onClick={handleClick}>
          Add +
        </button>
            </div>
        </div>
        </>
    )
}

First I made the Card.tsx file into a client component and tried making the handleClick event a server function, when that didn't work I tried making the Card component into a server component, I also tried making it asynchronous, the only time the onClick event worked was when I made the ServerSideProps component into a client side and used useEffect to fetch the data and then map, but I don't want that.

Upvotes: 0

Views: 22

Answers (0)

Related Questions