Next.js Discord

Discord Forum

I need to convert component to server component

arnez posted this in #help-forum
Open in Discord
"use client";
import { useState } from "react";

import MobileMenu from "./mobile-menu";
import MenuIcon from "./menu-icon";
import Menu from "./menu";

import Overlay from "../overlay";
import { openDialog } from "@/utils/dialogFunction";

const Navigation = () => {
  const [isOpen, setIsOpen] = useState(false);

  const toggleOpen = () => {

  return (
      <header className="fixed top-0 right-0 w-full h-20 border-b-[1px] z-30 bg-primary-100 backdrop-blur-md">
        <div className="nav-container grid lg:grid-cols-12 grid-cols-2 lg:gap-8 gap-4 h-full">
          <div className="flex items-center lg:col-span-3"><a href="/"><img src="/logo/logo-black.svg" alt="TrendFox Logo" className="max-h-14" /></a></div>
          <div className="hidden lg:flex lg:items-center lg:justify-center lg:col-span-6">
            <Menu />
          <div className="hidden lg:flex lg:items-center lg:justify-end lg:col-span-3">
             <button className="accent"  onClick={() => openDialog()}>Get&nbsp;Free&nbsp;Monthly&nbsp;Toolkit</button>
          <div className="lg:hidden relative">
            <MenuIcon isOpen={isOpen} toggleOpen={toggleOpen} />
      <div className="lg:hidden">
        <MobileMenu isOpen={isOpen} />
        <Overlay isOpen={isOpen} onClick={() => setIsOpen(false)} />

export default Navigation;

Well I fucked up somewhere now I need to convert that to server component. In to Menu component i will be fetching something and it doesn't let me as it's parent is client component. Is there any quick fix or do I need to waste my day on this shit.
Answered by Anay
Create another use client function, and pass the data to that function
View full answer

1 Reply

Create another use client function, and pass the data to that function